Возможно ли и как правильно анимировать path в svg с плавным эффектом качания?

Question

[Vyach Gor]

Есть svg картинка
Можно как либо анимировать path в svg с плавным эффектом качания по типу как на этом видео - link ? Или анимация такого количества точек будет сильно влиять на производительность и лучше и проще сделать через background видео ?

Comments

[Андрей Гончаров]

На svg не получится добиться такого эффекта, ты можешь морфить пути от одного состояния до другого, но высчитать такой морф волнообразный невозможно (как мне кажется) разумными способами. И второе ты уже сам упомянул - будут фризы и просадки фпс. Очень грузит морфинг путей, особенно в таком кол-ве.
Разумно это делать на webgl, но поди найди кто сумеет)
Так что остается видео, на мой взгляд.

[Сергей Сергей]

В видео линии похожи на образующие криволинейной поверхности, причём из синусов, по времени меняется фаза и амплитуда каждой образующей синусоиды, к тому же параметры соседних образующих также расположены в синусной зависимости. На первый взгляд. В примере поста синусные линии ещё и завёрнуты вокруг какого-то центра.
Потом вращение отображаемой поверхности в 3-х измерениях по математическим правилам, которые можно найти или высчитать самому в самом простом варианте. Если тяжело, то можно вращать с помощью css.
Расчёт на js будет долгим, но не требуется считать постоянно, можно заполнить некую покадровую таблицу — здесь оптимизация получится достаточной в разумных пределах.

[Vyach Gor]

Сергей Сергей, просто дело еще в том что это лишь одна из множества (более 10) картинок и каждая со своим уникальным дизайном расположения и закрученности линий - которую необходимо анимировать и рисовать это все вручную думаю я не справлюсь. Тут желательно что нибудь универсальное - думал про морфинг путей линий, но как и писали велик шанс что будут фризы и просадки фпс.

[Vyach Gor]

Андрей Гончаров, также думал про морфинг путей. Помню у gsap был неплохой плагин для морфинга svg morphsvg - там и плавность морфинга обещана и отличная оптимизация, правда я с этим плагином как то не работал.

[RAX7]

Vyach Gor, Лучше на canvas, он менее тормозой чем svg.

[Vyach Gor]

RAX7, ого довольно похоже и написано все вручную. это действительно круто.