Практические примеры применения масок svg

Прочитал эти статьи по теории масок, но не уверен, что понял всё правильно
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask http://css.yoksel.ruvg-masks/
Вот пример по маскам, пробую изменять параметры, хочется понять основные закономерности, чтобы в будущем уверенно применять svg маски.



.container {
width:50%
height:50%
}




Ответ
Примеры использования маски
Немного теории плюс примеры и можно сформулировать простые правила, которые будут помогать в освоении и практическом применении масок.
Можно представить маску в виде 2D объекта, например лист любого материала, который расположен между нашими глазами и объектом наблюдения. В листе будут вырезаться отверстия, форма которых задаются элементами svg между тегами

Если маска полностью непрозрачна fill="black" мы ничего не увидим.



.container {
width:50%
height:50%
}



Маска имеет форму двух окружностей, которые полностью прозрачны,- fill="white" Видим после применения маски, вырезанные части объекта, как они есть на оригинальном изображении.



.container {
width:50%
height:50%
}



Цвет заполнения маски находится между чёрным и белым цветом, то есть прозрачность маски будет между 0 и 1
На примере часть маски для левого глаза fill="gray" для правого fill="red"



.container {
width:50%
height:50%
}



Обработка фона вне маски
Для этой цели в теги добавляется прямоугольник занимающий всё пространство маскируемого объекта

Принцип тот же,- для фона вне маски, если fill="white" этот участок останется неизменным. В итоге фон как есть, а зона действия маски зависит от прозрачности, то есть от выбора цвета заливки. Для маски,- это глаза fill="black" становятся непрозрачными.



.container {
width:50%
height:50%
}



Теперь фон непрозрачный fill="black" маска fill="white"
В этой комбинации маска работает, как clipPath



.container {
width:50%
height:50%
}



Фон полупрозрачный fill="red" маска прозрачна fill="white"



.container {
width:50%
height:50%
}