JSFiddle - React, Tailwind, and code Playground

by jaap

HTML

<canvas id="c"></canvas>

JavaScript

var b = document.body;
			var c = document.getElementsByTagName('canvas')[0];
			var a = c.getContext('2d');
			document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/21

b.style.margin=0;
			c.width=window.innerWidth;
			c.height=window.innerHeight;
			a.x=a.y=0;
			z=[];
			j=[];
			u=[100,100];
			M=Math.random;
			r=44;
			q=0;
			for (i=0;i!=300;i++) z.push([M()*c.width,M()*5,1,1,50]);
			for (i=0;i!=150;i++) j.push([M()*c.width,M()*c.height,1,1,50]);
			HT = function(a,b,c,d) {
				var x = a - c;
				var y = b - d;
				return ((r*r)> (x * x) + (y * y));
			};

			T=function(e){
				e.preventDefault();
				if(e.targetTouches) e=e.targetTouches[0];
				u[0]=e.clientX;
				u[1]=e.clientY;
			};
			c.onmousemove=T;
			c.ontouchmove=T;
			c.ontouchstart=T;
			setInterval(function(){
				a.globalCompositeOperation='source-over';
				a.fillStyle='rgba(25,'+parseInt(5+(u[0]/c.width)*30)+','+parseInt(5+(u[1]/c.height)*30)+',.2)';
				a.fillRect(0,0,c.width,c.height);
				a.globalCompositeOperation='lighter';
				x=z.length;
				a.save();
				a.translate(u[0],u[1]);
				v=Math.sin(q/u[0])*40;
				w=Math.cos(q/u[1])*40;
				a.rotate(v/36);
				for (i=0;i!=x/3;i++){
					zz=(c.width/i);
					a.rotate(v/36);
					a.fillRect((v-(c.width/i))+c.width/i*2,(w-(c.height/i))+c.height/i*2,(c.width/i),(c.height/i));

				}
				q++;
				a.restore();
				for (i=0;i!=x/2;i++){
					f=j[i];
					//a.fillStyle='rgba('+(255-(i*2))+',255,'+(i*2)+',.2)';
					a.fillStyle='#f';
					a.fillRect(f[0],f[1],2,2);
					f[0]+=f[2]*M()*5;
					f[1]+=f[3]*M()*5;

					if(f[1]>c.height) f[1]=0;
					if(f[0]>c.width) f[0]=0;
					if(f[1]<0) f[1]=c.height;
					if(f[0]<0) f[0]=c.width;
					h=(HT(f[0],f[1],u[0],u[1]));
					if(h) {
						f[2]=v/40;
						f[3]=w/40;
					}
				}
				for...