How to make an illuminated area around the cursor in a shaded picture?

Question

css

I'm trying to make a lighted area on a shaded image that would follow the cursor. Is it possible to do this in css at least statically? I haven't come up with a way. If you manage to do this on css, then it remains to add a script for tracking the cursor, there are a couple of lines.
Tried experimenting with blend mode:

background: transparent radial-gradient(ellipse at center center , rgb(200, 200, 200) 0%, rgba(100, 100, 100, 0) 50%) repeat scroll 0% 0%;
mix-blend-mode: color-burn;

If it's impossible with css, then maybe you can do it with javascript? But I didn't find anything like it.

I know that these effects were popular 10-15 years ago, and I understand that now it looks strange. But it was necessary nonetheless.

Answer 1

You can do this with canvas:

document.addEventListener('mousemove', function(e) {
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();
    ctx.arc(e.offsetX, e.offsetY, 30, 0, 2 * Math.PI, true);
    ctx.rect(0, 0, w, h);
    ctx.fill();
});

JSBin