Как сделать такой эффект для курсора?

Question

[Den Sabrov]

Пример не нашёл. Нарисовал схематично.



Есть чёрно-белый фон (img_01). Вокруг курсора есть область (допустим, 250х250рх), внутри которой отображается цветной фон (img_02). При движении курсора получается своеобразный эффект факела. Картинки разные, то есть CSS фильтрами не обойтись.

Пока нашёл только вот или вот, но это не совсем то. Как исполнить этот эффект именно с учётом того, что внутри должна быть картинка?

Comments

[WapSter]

В твоих ссылках уже есть примеры реализации. Что еще то ты хочешь получить?

[Den Sabrov]

WapSter, реализации чего?

Answer 1

[RAX7]

Рисуешь одну картинку поверх другой, к верхней применяешь маску. Для этого подойдёт svg либо canvas

Comments

[Den Sabrov]

Именно то, что нужно. Спасибо, бро!:)

[Swartex]

если в ответе есть котик, это +10 в карму :)

Answer 2

[Артём Ведищев]

Почитай тут как раз твой случай.
Пример https://jsfiddle.net/qb6m0ux2/

Comments

[Den Sabrov]

Видимо, не совсем корректно описал. Как поменять курсор я знаю)
Закрепил в шапке картинку.