<div id="container"></div>
<script id="fragmentShader" type="x-shader/x-fragment">

			uniform vec2 resolution;
			uniform float time;

			void main()	{
				vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
				float a = time*40.0;
				float d,e,f,g=1.0/40.0,h,i,r,q;
				e=500.0*(p.x*0.5+0.5);
				f=800.0*(p.y*0.5+0.5);
				i=200.0+tan(e*g+a/100.0)*20.0;
				d=200.0+tan(f*g/2.0)*18.0+sin(e*g)*7.0;
				r=sqrt(pow(abs(i-e),2.0)+pow(abs(d-f),2.0));
				q=f/r;
				h=((f+d)+a/2.0)*g;
				i=sin(p.x/1.3)*(r/3.0);
				h=tan(f*g)*144.0-tan(e*g)*212.0*p.x;
				h=(h+(f-e)*q+tan(r-(a+h)/7.0)*10.0+i/4.0)*g;
				// i+=sin(h*2.3*tan(a/350.0-q))*184.0*tan(q-(r*4.3+a/12.0)*g)+sin(r*g+h)*184.0*(r*g+h);
				i=mod(i/5.6,256.0)/64.0;
				if(i<0.0) i+=4.0;
				if(i>=2.0) i=4.0-i;
				d=r/350.0;
				// d+=tan(d*d*1.0)*.1;
				f=(sin(a*g)+10.0)/2.0;
				gl_FragColor=vec4(vec3(f*i/1.6,i/20.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
			}

		</script>
body {
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
		
 var container;

			var camera, scene, renderer;

			var uniforms;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

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

				scene = new THREE.Scene();

				var geometry = new THREE.CircleBufferGeometry( 5, 6 );

				uniforms = {
					time: { type: "f", value: .1 },
					resolution: { type: "v2", value: new THREE.Vector2() }
				};
				var material = new THREE.ShaderMaterial( {

					uniforms: uniforms,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent

				} );
				var 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, true);
			}
			function onWindowResize( event ) {
				renderer.setSize( window.innerWidth, window.innerHeight );
				uniforms.resolution.value.y = renderer.domElement.height;
				uniforms.resolution.value.x = renderer.domElement.width;
			}
			function animate() {
				requestAnimationFrame( animate );
				render();
			}
			function render() {
				uniforms.time.value += .05;
				renderer.render( scene, camera );
			};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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