Как сделать SVG анимацию?

Question

[spacy fox]

Всем привет!
Друзья, я к вам снова с SVG)
Есть скриншот. Хочу попробовать сделать эту волну анимированной, но не просто эффект волны. Нужно чтобы при загрузке страницы прямая линия трансформировалась в изогнутую, как на скриншоте, один раз без повторов.
Может кто-нибудь подскажет как проще всего это можно реализовать? Стоит ли подключать snap.svg или есть вариант попроще, учитывая, что на странице предполагается всего одна такая манипуляция с svg?



Вот код.

<svg class="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="96" viewBox="0 0 1920 96"><path fill="red" clip-rule="evenodd" d="M0 0h1920v26s-108.11 70-490 70c-281.493 0-722.38-70-960-70C245.37 26 0 95.998 0 95.998V0z"/></svg>

Всем спасибо!

Answer 1

[Антон Мудренок]

Менять вам надо в "d" вот эти 2 кривые Безье(не факт что 100% правильно попал):

70c-281.493 0-722.38-70-960-70C245.37 26 0 95.998 0 95.998

Для этого рисуете еще один svg там где эти 2 кривые образуют прямую линию и смотрите какие значения d в каких точках поменялись. Потом эти значения выносите в переменные JS, чтобы на каждый шаг анимации вы могли их пересчитать и вставить в измененную "d", которую потом переприсваеваете кривой. Как менять значения уже вам выбирать, или с шагом, или по easing функции.
Как подобное делается без либ можете тут посмотреть: codepen.io/suez/pen/emjwvP?editors=0010

Стоит ли подключать snap.svg

Можно и подключить если терпения не хватит.

Я недавно баловался с GSAP, так там подобное вообще в пару строк можно сделать через плагин MorphSVG:
codepen.io/mudrenok/pen/NbbJmz
Знаю и бесплатную либу в которой есть Morph, но у нее нет документации) И сам я пока ей не пользовался, хотя и видел результаты и мне они понравились.