Как сделать освещенную область вокруг курсора на затененой картинке?

Question

[Игорь Че]

Пытаюсь сделать освещенную область на затененной картинке, которая двигалась бы вслед за курсором. Возможно ли это сделать на css хотя бы статично? Я вот не придумал способ. Если удастся это сделать на css, то останется дописать скриптик слежения за курсором, там пара строчек.
Пробовал экспериментировал с режимом наложения:

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;

Если на css невозможно, то наверное можно на JavaScript сделать? Но я ничего подобного не нашел.

Знаю, подобные эффекты были популярны лет 10-15 назад, и понимаю что сейчас это выглядит странно. Но тем не менее понадобилось.

Answer 1

[Aves]

Можно с помощью 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

Comments

[Игорь Че]

Спасибо огромное. Это оно. А можно границы круга сделать размытыми?

[Aves]

Игорь Че: можно так