JSFiddle - React, Tailwind, and code Playground

by agegorin

HTML

<canvas id="mainCanvas" width="10" height="10"></canvas>

CSS

*{padding:0;margin:0;border:0}
        body{
            background: #000;
			overflow: hidden;
        }

JavaScript

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
        };
})();

function getRandomInt(min, max)
{
    return Math.floor( Math.random() * (max - min + 1) ) + min;
}

var cnvs = document.getElementById("mainCanvas"),
    ctx = cnvs.getContext("2d"),
    inspace = false,
    inspaceHolder,
    finalise = false,
    topstop = true,
    colors = ["white","rgb(200,200,255)","rgb(255,220,220)"];
$(cnvs).attr("height",$(window).height());
$(cnvs).attr("width",$(document).width());

function newStar(){
    var life = getRandomInt(50,250);
    var dx = getRandomInt(0,cnvs.width);
    var dy = getRandomInt(0,cnvs.height);
    return {
        x : dx,
        y : dy,
        nx : dx,
        ny : dy,
        life : life,
        currentLife : life,
        color : colors[getRandomInt(0,1)],
        brightness : getRandomInt(50,100)
    };
}
var stars = [];
var finStars = [];
var maxStars = 350;
for(var i = 0; i < maxStars; i++){
    finStars.push(newStar());
}
show();
show();

var cx = Math.floor( cnvs.width / 2),
    cy = Math.floor( cnvs.height / 2 );

function show(){


    ctx.clearRect(0,0,cnvs.width,cnvs.height);

    for(var i = 0; i < colors.length; i++ ){


        ctx.fillStyle = colors[i];
        ctx.beginPath();

        for(var j = 0; j < stars.length; j++){

            if( stars[j].color == colors[i] )
            {
                stars[j].currentLife -= 2;
                if( stars[j].currentLife > -stars[j].life ){


                    var x = stars[j].x,
                        y = stars[j].y,
                        dx = cx - stars[j].x,
                        dy = cy - stars[j].y;
                    if (...