Примеры анимации масок SVG

Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.

Маска может работать в нескольких режимах

1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

Полный пример:

See the Pen
Animation mask SVG with radial gradient
by Alexandr_TT (@Alexandr_T)
on CodePen.

Второй пример

На первом слое расположены цветные градиентные полосы. Выше этого слоя расположено изображение.

Если бы к изображению не была бы применена маска mask=”url(#msk1)”, то было бы всегда видно только изображение, так как градиентные полосы расположены под изображением. Но к изображению применена маска, состоящая из двух прямоугольников, которые имеют fill=”black”, делая тем самым маску полностью прозрачной и показывая тем самым, нижний слой с градиентными полосами. При анимации раздвигания половинок маски, становится видно изображение.

See the Pen
Animation mask SVG with radial gradient
by Alexandr_TT (@Alexandr_T)
on CodePen.

Третий пример

Используется два изображения девушки и рассерженного льва

Этот пример аналогичен второму примеру.
На нижнем слое фоновое изображение льва.
На верхнем слое изображение девушки, к которому применена маска.

Анимация маски достигается изменением rx эллипса.
Анимация раскрытия изображения льва начинается после клика, закрытие изображения после повторного клика

See the Pen
Mask’s animation SVG Through one image, another image becomes visible
by Alexandr_TT (@Alexandr_T)
on CodePen.

Четвёртый пример

Анимация прозрачности маски

Как и в третьем примере два изображения:
нижнее, в качестве фона льва
к верхнему изображению девушки применена маска в форме овала

Анимация маски достигается за счет анимации прозрачности овала.

See the Pen
Mask SVG transparency animation
by Alexandr_TT (@Alexandr_T)
on CodePen.

⇚ Mask SVG теория на примерах

Добавить комментарий