Ilusion circulos concentricos

by sosegon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Concentric Circles Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // Set canvas size
        canvas.width = 600;
        canvas.height = 600;

        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        const numCircles = 5; // Number of circles
        const baseDiameter = 1; // Diameter of the smallest circle
        const baseDuration = 2; // Duration for the smallest circle
        const delayFactor = 0.5; // Time delay between circles

        let startTime = null;

        function drawCircle(radius, opacity) {
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
            ctx.fill();
        }

        function animate(time) {
            if (!startTime) startTime = time;
            let elapsed = (time - startTime) / 1000; // Convert ms to seconds

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < numCircles; i++) {
                let diameter = baseDiameter + 2 * i;
                let radius = (diameter / 2) * 50; // Scale for visibility

                let t0 = i * delayFactor;
                let t1 = t0 + baseDuration + i * delayFactor;

                let opacity = 0;
                if (elapsed >= t0 && elapsed <= t1) {
                    opacity = Math.sin(((elapsed - t0) / (t1 - t0)) * Math.PI);
     ...