JSFiddle - React, Tailwind, and code Playground

by Jitendra Zaa

HTML

<canvas id="canvas" width="600" height="600"></canvas>

CSS

canvas {
            border: 1px solid black;
        }

JavaScript

const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        const tileSize = 60;
        const animationSpeed = 200;
        const glowSize = 20;
        const trailLength = 4;

        const path = [
            [1, 1],
            [1, 2],
            [1, 3],
            [2, 3],
            [3, 3],
            [3, 4],
            [3, 5],
            [3, 6],
            [3, 7],
            [4, 7],
            [5, 7],
            [6, 7],
            [7, 7],
            [7, 6],
            [7, 5],
            [7, 4],
            [7, 3],
            [8, 3]
        ];

        function drawGlowingPoint(x, y, alpha) {
            const gradient = ctx.createRadialGradient(x, y, 0, x, y, glowSize);
            gradient.addColorStop(0, `rgba(255, 255, 0, ${alpha})`);
            gradient.addColorStop(0.8, `rgba(255, 255, 0, ${alpha * 0.5})`);
            gradient.addColorStop(1, 'rgba(255, 255, 0, 0)');
            ctx.fillStyle = gradient;
            ctx.fillRect(x - glowSize, y - glowSize, glowSize * 2, glowSize * 2);
        }

        function drawLetterL(x, y) {
            ctx.fillStyle = 'yellow';
            ctx.font = '500px sans-serif';
            ctx.fillText('L', x, y);
        }

        function animateGlowToPoint() {
            let step = 0;

            function movePoint() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                for (let i = Math.max(0, step - trailLength); i < step; i++) {
                    const [row, col] = path[i];
                    const x = col * tileSize;
                    const y = row * tileSize;
                    const alpha = (i - step + trailLength) / trailLength;
                    drawGlowingPoint(x + tileSize / 2, y + tileSize / 2, alpha);
                }

                const [row, col] = path[step];
                const x = col * tileSize;
                const y = row * tileSize;

                if (step === path.length - 1) {
     ...