JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="div1"></div>
<strong class="debug"></strong>

CSS

body {
	background: rgba(0,0,0,.9);
    font-size: 70px;
    color: #fff;
}
div {
	position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,0);
    border-radius: 100%;
}

.div1 {
	top: 50%; left: 50%;
    margin: -150px 0 0 -150px;
}
.div2 {
	top: 140px; left: 60px;
}
.div3 {
	top: 140px; left: 120px;
}
.div4 {
	top: 40px; left: 400px;

}

JavaScript

var $doc,mouseX,mouseY, $debug;

$doc = $(document);
$debug = $(".debug");
$div = $("div");

function randomnegative(){
	return Math.random() < 0.5 ? -1 : 1;
}

function shadow(rgb){
	var s =  randomnegative() * Math.floor(Math.random() * 5) + "px " + randomnegative() * Math.floor(Math.random() * 5) + "px 0" + randomnegative() * Math.floor(Math.random() * 3) + "px rgba(" + rgb + "," +  Math.random()  + ")";
    return s;
};

function dropShadow() {
    s = shadow("0,0,255");
    for (var i = 0; i < 2; i++){
    	s += ", " + shadow("255,0,0");
    	s += ", " + shadow("0,255,0");
    	s += ", " + shadow("0,0,255");
    }
    
    return s;
}

$doc.on("mousemove", function(event){
	mouseX = event.pageX;
	mouseY = event.pageY;
});
console.log(dropShadow())
function render(){
    console.log("ok")
	$debug.text(mouseX + "." + mouseY);
    window.webkitRequestAnimationFrame(render);
    $div.css("box-shadow", dropShadow());
}

render()