Используем карты смещений для различных эффектов SVG-фильтры позволяют делать не только цветовые трансформации, но и интересные искажения. Один из самых занятных инструментов для этого — feDisplacementMap. Как добавить: — Через feImage подключаем изображение, по которому будем смещать пиксели — Указываем feDisplacementMap, который на вход получает два канала — по сути изображение, которое искажается, и изображение, по которому искажаем. Также указываем насколько сильно искажать изображение — Накладываем фильтр через свойство filter: url() Как работает: Имеем 2 канала (2 изображения), берется каждая точка и для нее формируется вектор смещения по следующей формуле: x' = x + scale (XC(x,y) - 0.5) y' = y + scale (YC(x,y) - 0.5) — scale — насколько сильно смещаем — XC(x,y) и YC(x,y) — значение RGB из изображения, по которому искажаем, деленное на 255 — x и y — начальные координаты точки Таким образом каждая точка на изображении получает вектор, куда и насколько сместить эту точку C помощью feDisplacementMap можно, например, реализовать Liquid Glass. Также можно реализовать эффект наложения текста на текстурный фон, будто текст является частью текстуры Демка тут