Как сделать оверлей над всем контентом сайта с фоновым цветом и прозрачным svg элементом по центру?

Question

[igor_solweb]

Добрый день.

Задача такая:
Добавить над сайтом оверлей с черной заливкой но прозрачным "окошком" в виде кастомного svg элемента в виде бинокля. То есть контент сайта должно быть видно, только через этот "бинокль".

Видел вот такую реализацию

И вот такой пример еще есть

Но там проблема в том, что размер общий для всего оверлея, у меня задача такая, чтобы иметь возможность менять размер "бинокля". Изначально у "бинокля" размер будет, к примеру, 750х400px, но через js будет задаваться анимация уменьшения, увеличения и перемещения.

То есть итоговый вариант примерно такой должен быть:


Пример кода на jsfiddle

Answer 1

[igor_solweb]

Отвечу на свой вопрос ) Еще немного поискал инфу, думал как-то применить исключение цвета вроде chroma key, и оказалось можно применить svg filter, долго описывать не буду, вот итоговый вариант:
jsFiddle

Основная идея в том, что блоку-overlay задаем background в виде data-image svg, svg заливаем тем цветом который позже хотим исключить для эффекта прозрачности, и также мы можем менять размер нашего svg через свойство background-image.

Полезная ссылка про применение фильтра svg

Ответ пока оставлю на пару дней, может кто-то предложит свой вариант, но текущий вполне подходит.
Надеюсь будет полезно кому-то.

Answer 2

[Максим]

Тут в принципе ни чего сложного https://codepen.io/topicstarter/pen/LYJZxbB