<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-fragment">
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
	float fr = u_resolution.x/40.0;	
    vec3 x = vec3(st.x);
    vec3 y = vec3(st.y);

	vec3 colorA = vec3(0.5, 0., 0.5);
	vec3 colorB = vec3(1.0, 0.41, 0.71);
	vec3 colorC = vec3(0.0, 1.0, 1.0);

	vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
	vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
	vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

    gl_FragColor = vec4(color3, 1.0);
}
</script>
* {
	user-select: none;
}

body {
	background-color: hotpink;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
View Compiled
/* 
 * SUMMER SCREEN
 * Shader Exp XXVIII.
 *
 * Follow my shader experiments here:
 * https://github.com/ilithya/anydayshaders
 * https://twitter.com/hashtag/anydayshaders
 * https://www.instagram.com/explore/tags/anydayshaders/
 *
 * #058 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_rocks
 */

let camera, scene, renderer, clock;
let uniforms;

init();
animate();

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

	clock = new THREE.Clock();
	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() },
	};

	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);
}

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 render() {
	uniforms.u_time.value = clock.getElapsedTime();
	renderer.render(scene, camera);
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js