Студия дизайна «Разумный подход» Владимира Соловьёва, podhod.ru

Множественные эффекты в SVG

Владимир Соловьёв, 1 октября

Формат SVG это не только векторный формат для объектов с обводками с градиентами. С помощью встроенных фильтров и анимаций в SVG можно собирать визуальные эффекты: анимировать движение, размывать изображение, менять его цвет, добавлять внутренние тени.

Вот пример где я объединил несколько таких эффектов в одну цепочку: чёрно-белый градиент движется по серому логотипу с внутренней тенью, изображение размывается и раскрашивается кривыми как gradient map, а также получает легкий нойз. Все это получается очень компактно, поскольку эти возможности есть в SVG — без шейдеров, WebGL и сторонних библиотек. Посмотрите исходный код.

Задать вопрос