SOURCE

/* 
 * LINEAR WORLD
 * Shader Exp XVIII.
 *
 * Shader code remix from one of the examples in the Book of Shaders. I tweaked a few things, but this shader was originally written by Patricio Gzz - @patriciogv 
 *
 *
 * Follow my shader experiments here:
 * https://twitter.com/hashtag/anydayshaders
 * https://www.instagram.com/explore/tags/anydayshaders/
 *
 * #052 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 */

let camera, scene, renderer;
let uniforms;

init();
animate();

function init() {
	const container = document.getElementById("container");

	camera = new THREE.Camera();
	camera.position.z = 1;

	scene = new THREE.Scene();

	const geometry = new THREE.PlaneBufferGeometry(2, 2);

	uniforms = {
		u_time: { type: "f", value: 1.0 },
		u_resolution: { type: "v2", value: new THREE.Vector2() },
		u_mouse: { type: "v2", value: new THREE.Vector2() }
	};

	const material = new THREE.ShaderMaterial({
		uniforms,
		vertexShader: document.getElementById("vertex").textContent,
		fragmentShader: document.getElementById("fragment").textContent
	});

	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);

	container.appendChild(renderer.domElement);

	onWindowResize();
	window.addEventListener("resize", onWindowResize);

	document.onmousemove = function (e) {
		uniforms.u_mouse.value.x = e.pageX;
		uniforms.u_mouse.value.y = e.pageY;
	};
}

function onWindowResize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	uniforms.u_resolution.value.x = renderer.domElement.width;
	uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
	render();
	requestAnimationFrame(animate);
}

function render() {
	uniforms.u_time.value += 0.05;
	renderer.render(scene, camera);
}

<div id="container"></div>
<script id="vertex" type="x-shader/x-vertex">
	void main() {
		gl_Position = vec4(position, 1.0);
	}
</script>

<script id="fragment" type="x-shader/x-vertex">
// Shader code remix after:
// Author @patriciogv - 2015
// Title: Mosaic
	
#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float random (vec2 st) {
    return fract(
		sin(
			dot(
				st.xy,
				vec2(12.9898,78.233)
			)
		)*43758.5453123
	);
}

void main() {
    vec2 st = gl_FragCoord.y/u_resolution.xy;
	
    st *= u_resolution.xy/12.;
    vec2 ipos = floor(st);
    vec3 color = vec3(sin(u_time*1.5*random(ipos)), 0.51, 0.71);
	
    gl_FragColor = vec4(color, 1.0);
}
</script>

$c1: hotpink;

* {
	user-select: none;
}

body {
	height: 100%;
	background-color: $c1;
	margin: 0;
	padding: 0;
	overflow: hidden;
}