JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<center><div style="color:#fff;font-size:25px;text-alighn:center;padding-top:20%;">APO-UCOZ.COM</div></center>

<canvas id="cvs" height="500" width="1920"></canvas>

CSS

body {
    background: #000;
    min-height:3000px;
}

#cvs {
    position: fixed;
    top:0px;
    left:0px;
    z-index:-1;
}

JavaScript

/************* SHIM ************************/
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
/********************************************/
var canvas = document.getElementById('cvs'),
    ctx = canvas.getContext('2d'),
    height = canvas.height = document.body.offsetHeight,
    width = canvas.width = document.body.offsetWidth,
    collection = [],
    num_drops = 500, // number of drops
    gravity = 1, // gravity multiplier 
    windforce = 5, // yea i'd just leave this
    windmultiplier = 5, // this freaks out on large numbers
    maxspeed = 3, // this is so you never run too fast (it is a multiplier not raw)
    gutter = 0; // the percentage distance to travel off screen before wrapping

function Drop() {
    this.x;
    this.y;
    this.radius;
    this.distance;
    this.color;
    this.speed;
    this.vx;
    this.vy;
}
Drop.prototype = {
    constructor: Drop,

    random_x: function () {
        var n = width * (1 + gutter);
        return (1 - (1 + gutter)) + (Math.random() * n);
    },
    draw: function (ctx) {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
    }
};

function draw_frame() {
    // this was recommended (see comments)
    // check it out, just comment out the 
    // ctx.clearRect(0, 0, width, height);
    // line and uncomment the three below:

    //ctx.globalCompositeOperation="darker";
    //ctx.fillStyle="rgba(0,0,0,0.5)";
    //ctx.fillRect(0,0,width,height);  
    ctx.clearRect(0, 0, width, height);

    // in a previous attempt I even go as far
    // as to ensure i'm drawing the furthest particles 
    // first for the z-index overlay.
    // in...