StackOverflow's "Ultra Dark" floodlight effect implementation

floodlight.css

:root {
    --cursorX:50vw;
    --cursorY:50vh;
}

body.theme-ultradark:after {
    content: '';
    position: fixed;
    display: block;
    border-radius: 100%;
    top: calc(var(--cursorY) - 100px);
    left: calc(var(--cursorX) - 100px);
    background-color: transparent;
    width: 200px;
    height: 200px;
    backdrop-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='flashlight'%3E%3CfeFlood result='floodFill' x='0' y='0' width='200' height='200' flood-color='white' flood-opacity='1' /%3E%3CfeBlend in='floodFill' in2='SourceGraphic' mode='overlay' /%3E%3C/filter%3E%3C/svg%3E#flashlight") brightness(500%) saturate(200%);
    pointer-events: none;
    z-index: 9999999999999;
}

floodlight.js

if (document.body.classList.contains('theme-ultradark')) {
    document.addEventListener('mousemove', e => {
        window.requestAnimationFrame(() => {
            const X = e.clientX;
            const Y = e.clientY;

            document.documentElement.style.setProperty('--cursorX', X + 'px');
            document.documentElement.style.setProperty('--cursorY', Y + 'px');
        });
    });
}

floodlight.svg

<!--
The actual SVG is inline in the backdrop-filter CSS, I've just copied it here too so we can get a better look at it.
-->

<svg xmlns='http://www.w3.org/2000/svg'>
    <filter id='flashlight'>
        <feFlood result='floodFill' x='0' y='0' width='200' height='200' flood-color='white' flood-opacity='1' />
        <feBlend in='floodFill' in2='SourceGraphic' mode='overlay' />
    </filter>
</svg>