JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<body onload="
d=c.getContext('2d');
var stars = [];

function render()
{
    d.fillStyle = 'rgba(0,0,0,0.4)';
    d.fillRect(0,0,600,400);
    d.fillStyle = 'rgb(255,255,255)';
    for(i in stars)
    {
        var star = stars[i];
        star[4] *= 1.1; //(Math.acos(star[0])+Math.acos(star[1]))/100;
        star[0] += star[2]*star[4];
        star[1] += star[3]*star[4];
        d.beginPath();
        d.arc(300+star[0],200+star[1],star[4]/8,0,2*Math.PI);
        d.fill();
    }
    stars.push([0,0,Math.cos(Math.random()*Math.PI*2),Math.sin(Math.random()*Math.PI*2),1]);
    stars.push([0,0,Math.cos(Math.random()*Math.PI*2),Math.sin(Math.random()*Math.PI*2),1]);
    if(stars.length > 80)
    {
        stars.shift();
    }
    window.requestAnimationFrame(render);
}

render();

"><canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
    border: 1px solid #06A;
}

JavaScript

run = function()
{
    function drawPoint()
    {
    
    }
    d=c.getContext('2d');
}