JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

Cavas:<br><canvas id="c"></canvas>

JavaScript

var c=document.getElementById('c'),
    t=c.getContext('2d'),
    x=0,
    y=0,
    dir=1;
window.addEventListener("resize", r, 0);
r();

document.body.style.backgroundColor = "#000";

x = c.width * 0.5;
y = c.height * 0.5;

document.addEventListener('mousemove', function(e) {
    x = e.clientX;
    y = e.clientY;
}, 0);

p = {
    x:x,
    y:y,
    inc: 0.04, //speed, ~ 4 rads/sec
    dist: 0, //distance around circle (radians)
    d:x, //point center ellipse
    k:y, //point center ellipse
    rad: 55 //radius
};
var time=17;
var otime=17;
var ot=(new Date()).getTime();

    //alert(ot);
i=0;
l=[];
while(i<25) {
    temp = {
        x:x,
        y:y,
        inc: 0.01 + 0.04*Math.random(), //speed
        dist: 0, //distance around circle (radians)
        d:x, //point center ellipse
        k:y, //point center ellipse
        //color: "#" + (Math.random()*4210752 + 11184810 | 0).toString(16),
        color: "#" + (Math.random()*14540253 + 2236962 | 0).toString(16),
        rad: (55 + 55*Math.random()) //radius
    };
    i++;
    l.push(temp);
}

setInterval(function() {
    var now=(new Date()).getTime();
    if(now-ot>otime) {
        time*=.95;
    } else if(now-ot!=otime) {
        time*=1.05;
    }
    t.fillStyle = "#fff";
    t.fillText(now-ot, 10, 10);
    ot=now;
    t.fillStyle = "rgba(0,0,0,.05)";
    t.fillRect(0, 0, c.width, c.height);
    t.fill();
    i=0;
    while(i<l.length) {
        p=l[i];
        t.beginPath();
        t.fillStyle=p.color;
        t.strokeStyle=p.color;
        t.lineWidth=2;
        oldp = {
            x:p.x,
            y:p.y
        };
        t.moveTo(oldp.x, oldp.y);
        p.dist+=p.inc;
        p.d+=(x-p.d)*p.inc;
        p.k+=(y-p.k)*p.inc;
        p.x=p.d+Math.cos(i+p.dist)*p.rad;
        p.y=p.k+Math.sin(i+p.dist)*p.rad;
        
        t.lineTo(p.x, p.y);
        t.stroke();
        t.arc(p.x, p.y, 1.4, 0, Math.PI * 2, 0); //makes tip rounded
        t.fill();
        l[i]=p;
        i++;
    }
}...