<canvas id="embersCanvas"></canvas>
View Compiled
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #191C27;
}
canvas {
  display: block;
}
View Compiled
const canvas = document.getElementById('embersCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const embers = [];
    const emberCount = 100;

    // Ember particle settings
    const emberSettings = {
        maxSize: 3,
        minSize: 1,
        maxSpeed: 2,
        minSpeed: 0.5,
        color: 'rgba(255, 51, 52, 0.7)', // Orange-red color with transparency
    };

    // Adjust canvas size on resize
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    // Ember particle class
    class Ember {
        constructor() {
            this.reset();
        }

        reset() {
            this.x = Math.random() * canvas.width;
            this.y = canvas.height + Math.random() * 600;
            this.size = emberSettings.minSize + Math.random() * (emberSettings.maxSize - emberSettings.minSize);
            this.speed = emberSettings.minSpeed + Math.random() * (emberSettings.maxSpeed - emberSettings.minSpeed);
            this.opacity = 1;
            this.fadeRate = Math.random() * 0.02 + 0.005;
            this.color = emberSettings.color;
        }

        update() {
            this.y -= this.speed;
            this.opacity -= this.fadeRate;
            if (this.opacity <= 0) {
                this.reset();
            }
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color.replace('0.7', this.opacity.toFixed(2)); // Adjust opacity
            ctx.fill();
        }
    }

    // Create initial embers
    for (let i = 0; i < emberCount; i++) {
        embers.push(new Ember());
    }

    // Animation loop
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        embers.forEach(ember => {
            ember.update();
            ember.draw();
        });

        requestAnimationFrame(animate);
    }

    animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.