JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

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

CSS

html, body {
  font-size: 0;
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.getElementById("canvas");
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";

var start = 100;

var particles = [];
var Particle = function() {
    this.x = Math.random() * w;
    this.y = Math.random() * start * 2 + h;
    this.radius = (Math.random() + 0.5) * 3;
    this.vx = (Math.random() - 0.5) / 10;
    this.vy = -1;
};

function animate() {
    ctx.clearRect(0, 0, w, h);
    
    var pIterator = particles.length;
    while(--pIterator) {
        var p = particles[pIterator];
        ctx.fillRect(p.x, p.y, p.radius, p.radius);
        
        p.vx += (Math.random() - 0.5) / 4;
        
        p.x += p.vx;
        p.y += p.vy;
        
        if (p.x < 0 || p.x > w || p.y < 0) {
            particles.splice(pIterator, 1);
            spawn();
        }
    }
    
    requestAnimationFrame(animate);
}

function spawn() {
    particles.push(new Particle());
}

for(var i = 0; i < start; ++i, spawn());

animate();