JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<canvas></canvas>

CSS

#box_space {
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
}

JavaScript

$(function () {
    var canvas = $('canvas')[0];
    var context = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var Dots = [];
    var colors = ['#1a2e35', '#2b454e', '#d4e4ea', '#507e8d'];
    var maximum = 400;

    function Initialize() {
        GenerateDots();

        Update();
    }

    function Dot() {
        this.active = true;

        this.diameter = Math.random() * 20;

        this.x = Math.round(Math.random() * canvas.width);
        this.y = Math.round(Math.random() * canvas.height);

        this.velocity = {
            x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7,
            y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7
        };

        this.alpha = 0.1;
        this.hex = colors[Math.round(Math.random() * 3)];
        this.color = HexToRGBA(this.hex, this.alpha);
    }

    Dot.prototype = {
        Update: function () {
            if (this.alpha < 0.8) {
                this.alpha += 0.01;
                this.color = HexToRGBA(this.hex, this.alpha);
            }

            this.x += this.velocity.x;
            this.y += this.velocity.y;

            if (this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
                this.active = false;
            }
        },

        Draw: function () {
            context.fillStyle = this.color;
            context.beginPath();
            context.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
            context.fill();
        }
    }

    function Update() {
        GenerateDots();

        Dots.forEach(function (Dot) {
            Dot.Update();
        });

        Dots = Dots.filter(function (Dot) {
            return Dot.active;
        });

        Render();
        requestAnimationFrame(Update);
    }

    function Render() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        Dots.forEach(function (Dot) {
           ...