const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
        
            // Set canvas size
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            resizeCanvas();
            window.addEventListener("resize", resizeCanvas);
        
            // Array to keep track of circles
            const circles = [];
            const fadeDuration = 2000; // duration in milliseconds
        
            function addCircle(x, y) {
                circles.push({ x, y, startTime: Date.now() });
            }
        
            function drawCircle({ x, y, startTime }) {
                const elapsed = Date.now() - startTime;
                const progress = elapsed / fadeDuration;
                const alpha = Math.max(0.5 - progress, 0);
                const radius = 200;
        
                // Create a radial gradient with fading alpha
                const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
                gradient.addColorStop(0, `rgba(3,98,76, ${alpha})`); // green center
                gradient.addColorStop(1, "rgba(3,98,76, 0)"); // fades out
        
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2);
                ctx.fill();
            }
        
            function animate() {
                // Clear the entire canvas on each frame
                ctx.clearRect(0, 0, canvas.width, canvas.height);
        
                // Draw and update circles
                for (let i = circles.length - 1; i >= 0; i--) {
                    const circle = circles[i];
                    const elapsed = Date.now() - circle.startTime;
                    if (elapsed > fadeDuration) {
                        // Remove circle when its fade duration is over
                        circles.splice(i, 1);
                    } else {
                        drawCircle(circle);
                    }
                }
        
                requestAnimationFrame(animate);
            }
            animate();
        
            // Add a new circle on each mouse move event
            document.addEventListener("mousemove", (event) => {
                addCircle(event.clientX, event.clientY);
            });