JSFiddle - React, Tailwind, and code Playground

by agegorin

HTML

<canvas id="canvas"></canvas>

CSS

*{padding:0;margin:0}
body{background:black;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; 
}
function addEvent(elem, type, handler)
{
    if (elem.addEventListener)
        elem.addEventListener(type, handler, false);
    else if (elem.attachEvent)
        elem.attachEvent("on" + type, handler);
}

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = document.width || 800;
canvas.height = document.height || 800;

var colors = ["white","rgb(200,200,255)"]; 

function newStar(){ 
    var life = getRandomInt(50,150); 
    var dx = getRandomInt(0,canvas.width); 
    var dy = getRandomInt(0,canvas.height); 
    return { 
        x : dx, 
        y : dy, 
        nx : dx, 
        ny : dy, 
        life : life, 
        currentLife : life, 
        color : colors[getRandomInt(0,1)] 
    }; 
} 

var stars = []; 
var finStars = []; 
var maxStars = 350; 
for(var i = 0; i < maxStars; i++){ 
    finStars.push(newStar()); 
} 

function show(){
    
    var cx = Math.floor( canvas.width / 2),
        cy = Math.floor( canvas.height / 2 );
    
    ctx.clearRect(0,0,canvas.width,canvas.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--;
                if(...