JSFiddle - React, Tailwind, and code Playground

by phloe

CSS

* {
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}
body {
    position: absolute;
    width: 100%;
    _margin-top: 50%;
    _top: -50%;
    _margin-left: -50%;
}
body:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
canvas {
    _opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var canvas = document.createElement("canvas");
var width = 800;
var height = width;
var centerx = width / 2;
var centery = height / 2;
var spread = 20;
var scale = 10;
var mx = centerx;
var my = centery;
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

window._onmousemove = function (e) {
    var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
    mx = posx;
    my = posy;
};
var context = canvas.getContext("2d");
context.fillStyle = "#777";
context.fillRect (0, 0, width, height);
var startframe = new Date();
var lastframe = startframe;
function frame () {
    var now = new Date();
    var rotation = Math.sin((now - startframe) / 1000000); //Math.sin(1 * ((now - lastframe) / 16));//(mx - centerx) / width;
    lastframe = now;
    var num = 10;
    while (num--) {
        point(context, `rgb(${randomValue(255)}, ${randomValue(255)}, ${randomValue(255)})`);
    }
    /*
    num = 10;
    while (num--) {
        point(context, "#000");
    }
    */
    context.translate(centerx, centery);
    context.rotate(rotation);
    context.drawImage(canvas, -centerx - (scale/2), -centery - (scale/2), width + scale, height + scale);
    context.rotate(-rotation);
    context.translate(-centerx, -centery);
    requestAnimationFrame(frame);
}

function point (context, color) {
    var x = Math.ceil(Math.random() * spread) - (spread/2);
    var y = Math.ceil(Math.random() * spread) - (spread/2);
    context.fillStyle = color;//"rgb(" + Math.floor(Math.random() * 200) +", " + Math.floor(Math.random() * 230) +", " + Math.floor(Math.random() * 255) +")";//color;
    context.fillRect (centerx + x, centery + y, 1, 1);
}

function randomValue(length) {
	return...