JSFiddle - React, Tailwind, and code Playground

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

HTML

<canvas id="box_canvas1" class="box_canvas"></canvas>

JavaScript

$(function () {
    var canvas = $('#box_canvas1')[0];
    var context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var Dots = [];
    var colors = ['#1a2e35', '#2b454e', '#d4e4ea', '#507e8d'];
    var maximum = 100;

    function Initialize() {
        GenerateDots();
        Update();
    }

    function Dot() {
        this.active = true;
        this.diameter = Math.random() * (15 - 6) + 6;
        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.shadowOffsetX = 0;
            context.shadowOffsetY = 1;
            context.shadowBlur = 2;
            context.shadowColor = "rgba(0, 0, 0, 0.5)";
            context.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
            context.fill();
            context.lineWidth = 2;
            context.strokeStyle = this.color;
            context.stroke();

        }
    };

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