leumas-universal-crud-react/src/styles/Particles/Partcles.js

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

class MagicParticle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 10;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.opacity = 100;
        this.colors = ["#00dafc", "#0000ff", "#333333", "#ff0000", "#00ff00", "#ffffff"];
        this.baseColor = this.colors[Math.floor(Math.random() * this.colors.length)];
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.opacity -= 1;
    }

    draw(ctx) {
        ctx.fillStyle = this.baseColor;
        ctx.globalAlpha = this.opacity / 100;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}