JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<canvas id="stars-background" width="1024" height="1024"></canvas>
<canvas id="stars-dynamic" width="1024" height="1024"></canvas>

CSS

canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    position : absolute;
    
    top : 0;
    left : 0;
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
    background-size: cover;
    overflow: hidden;
}

JavaScript

var dynamicParams = {
        size : 4,
        ratio : { min : 1.5, max : 1.5 },
        glow : { min : 0, max : 0 },
        duration : { min : 500, max : 5000 },
        num : 15,
        colour : "white"
    },
    staticParams = {
        size : 1,
        ratio : { min : 1, max : 1 },
        glow : { min : 0, max : 0 },
        duration : 0,
        num : 100,
        colour : "white"
    };

drawStars(document.getElementById("stars-background"), staticParams);

drawStars(document.getElementById("stars-dynamic"), dynamicParams);

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

function drawStars(canvas, params) {
    var context = canvas.getContext("2d"),
        stars = [];

    drawFrame();

    function drawFrame() {
        var i,
            now = (new Date()).getTime(),
            star,
            size,
            xPos,
            yPos;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        for (i = 0; i < params.num; i++) {
            star = stars[i];
            if (star === undefined || (star.destroy < now && star.destroy !== 0)) {
                star = createStar(now);
                stars[i] = star;
            }
            if (star.destroy) {
                size = star.size * (1 - Math.pow(((now - star.start) / (star.destroy - star.start) - 0.5) * 2, 4)) * (params.size - 1) + 1;
            } else {
                size = star.size;
            }
            xPos = star.x * canvas.width;
            yPos = star.y * canvas.height;
            context.beginPath();
            context.moveTo(xPos + size, yPos);
            context.quadraticCurveTo(xPos, yPos, xPos, yPos + size * star.ratio);
            context.quadraticCurveTo(xPos, yPos, xPos - size, yPos);
            context.quadraticCurveTo(xPos, yPos, xPos, yPos - size * star.ratio);
            context.quadraticCurveTo(xPos, yPos, xPos + size, yPos);
            context.strokeStyle = params.colour;
           ...