Code Playground

console.log("Event Fired")
const colors = [
    '#1c9cbd',  // Teal
    '#8abe56',  // Green
    '#f7ce46',  // Yellow
    '#4256a1',  // Purple
    '#bd6700'   // Orange
];

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const shapes = [];
const shapeCount = 150;

// Resize canvas to full window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = '#ebf2dd';

// Function to lighten a color
function tint(color, percentage) {
    const num = parseInt(color.slice(1), 16);
    const amt = Math.round(2.55 * percentage);
    const R = (num >> 16) + amt;
    const G = (num >> 8 & 0x00FF) + amt;
    const B = (num & 0x0000FF) + amt;
    return `#${(
        0x1000000 +
        (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
        (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
        (B < 255 ? B < 1 ? 0 : B : 255)
    ).toString(16).slice(1)}`;
}

class TriangleShape {
    constructor(x, y, speed, size) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.size = size;
        this.segmentColors = Array.from({ length: 5 }, () => colors[Math.floor(Math.random() * colors.length)]);
        this.pulseRates = Array.from({ length: 5 }, () => 0.02 + Math.random() * 0.03);
        this.pulsePhases = Array.from({ length: 5 }, () => Math.random() * Math.PI * 2);
    }

draw() {
        const baseX = this.x;
        const baseY = this.y;
        const segmentHeight = this.size / 5;
        const widthFactor = 2; // Increase this value to make the triangles wider
        
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 6;

for (let i = 0; i < 5; i++) {
            const currentY = baseY - segmentHeight * i;
            const nextY = baseY - segmentHeight * (i + 1);

ctx.beginPath();
            ctx.moveTo(baseX - (widthFactor * this.size / canvas.height) * (segmentHeight * (5 - i)), currentY);
            ctx.lineTo(baseX + (widthFactor * this.size / canvas.height) * (segmentHeight * (5 - i)), currentY);
            ctx.lineTo(baseX + (widthFactor * this.size / canvas.height) * (segmentHeight * (4 - i)), nextY);
            ctx.lineTo(baseX - (widthFactor * this.size / canvas.height) * (segmentHeight * (4 - i)), nextY);
            ctx.closePath();

const pulseValue = 0.5 + 0.5 * Math.sin(this.pulsePhases[i]);
            ctx.fillStyle = pulseValue > 0.5 ? tint(this.segmentColors[i], 20) : this.segmentColors[i];
            ctx.fill();
            ctx.stroke();

this.pulsePhases[i] += this.pulseRates[i];
        }
    }

update() {
        this.y -= this.speed;
        if (this.y + this.size < 0) {
            this.y = canvas.height + this.size;
        }
    }
}

function init() {
    for (let i = 0; i < shapeCount; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height + canvas.height + Math.random() * canvas.height;
        const speed = 0.5 + Math.random() * 1.5;
        const size = canvas.height / 15 + Math.random() * (canvas.height / 5);  // Adjust the size to make shapes larger and vary more
        shapes.push(new TriangleShape(x, y, speed, size));
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    shapes.forEach(shape => {
        shape.update();
        shape.draw();
    });
    requestAnimationFrame(animate);
}

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.backgroundColor = '#ebf2dd';
    shapes.length = 0;
    init();
});

init();
animate();

Frontend Forever App