Принёс вам демку, в которой интересно поразбираться.
Балинт Ференци собрал на CodePen классный пример рамки, по которой как будто идёт электрический ток. Как это работает:
- При помощи фильтра
feTurbulence создаётся три слоя с шумом. Это буквально статические картинки, которые выглядят как цветной дым.- Каждому слою задана бесконечная анимация, которая двигает слой либо влево, либо вверх. Интересно, что слоёв, которые движутся вверх, сразу два.
- При помощи
feComposite и feBlend эти слои смешивают в режиме color-dodge. Получается общий источник пикселей в виде анимированного шума.- И затем применяется
feDisplacementMap, который склеивает картинку, поверх которой будет применяться фильтр, и сгенерированный шум в тонкие электрические линии.- В CSS это подключается просто,
filter: url(#turbulent-displace).Вся магия в том, что сгенерированный шум во время анимации создаёт яркие и менее яркие области, которые псевдослучайно перемещаются по картинке. Если при помощи фильтров использовать эти яркие области для карты смещения, получается вау-эффект. В демке ещё хорошо имитируются игра света и блики на поверхности, что в комбинации даёт очень красивую, на мой взгляд, карточку.
Сохранил себе в закладки на случай, если захочется что-нибудь эдакое технологическое поделать в интерфейсах.
https://codepen.io/BalintFerenczy/pen/KwdoyEN
