JSFiddle - React, Tailwind, and code Playground

by sosegon

HTML

<svg id="scene" width="500" height="500" viewBox="0 0 500 500">
    <!-- Define filters for lighting effects -->
    <defs>
        <radialGradient id="lightGradient" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="rgba(255,255,255,1)" />
            <stop offset="100%" stop-color="rgba(255,255,255,0)" />
        </radialGradient>

        <filter id="shadowFilter" x="-50%" y="-50%" width="200%" height="200%">
            <feOffset dx="5" dy="5" result="offset" />
            <feGaussianBlur in="offset" stdDeviation="10" result="blurred" />
            <feBlend in="SourceGraphic" in2="blurred" mode="normal" />
        </filter>
    </defs>

    <!-- Object being illuminated -->
    <circle id="object" cx="250" cy="250" r="60" fill="gray" filter="url(#shadowFilter)" />

    <!-- Light source -->
    <circle id="light" cx="100" cy="100" r="80" fill="url(#lightGradient)" opacity="0.8" />
</svg>

<script>
    const light = document.getElementById("light");

    document.addEventListener("mousemove", (event) => {
        const { clientX, clientY } = event;
        
        // Move the light source with the mouse
        light.setAttribute("cx", clientX);
        light.setAttribute("cy", clientY);
    });
</script>