JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

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

CSS

* {margin: 0; padding: 0;}
        canvas {display: block; background: #000;}

JavaScript

var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");  
            
            var ww = window.innerWidth;
            var wh = window.innerHeight;
            
            canvas.width = ww;
            canvas.height = wh;
            
            var particles = [];
            
            for(var i = 0; i < 10; i++)
            {
                particles.push(new particle());
            }
            
            function particle()
            {
                this.x = Math.random()*ww;
                this.y = Math.random()*wh;
                
                r = Math.random()*255>>0;
                g = Math.random()*255>>0;
                b = Math.random()*255>>0;
                a = Math.random();
                this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
                
                this.radius = 0;
                
                this.speed = 3;
                this.angle = Math.random()*360*Math.PI/180;
            }
            
            function draw()
            {
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
                ctx.fillRect(0, 0, ww, wh);
                ctx.globalCompositeOperation = "lighter";
                
                for(var i = 0; i < particles.length; i++)
                {
                    var p = particles[i];
                    ctx.fillStyle = "rgba(255, 255, 255, 1)";
                    ctx.fillRect(p.x, p.y, p.radius, p.radius);
                    
                    req_angle = Math.random()*360;
                    if(req_angle > p.angle) p.angle += Math.PI/180;
                    else p.angle -= Math.PI/180;
                    
                    p.x = p.x + p.speed*Math.cos(p.angle);
                    p.y = p.y + p.speed*Math.sin(p.angle);
                    
                    for(var i2 = 0; i2 < particles.length; i2++)
                    {
                       ...