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

Question

[WebN00b]

Привет. С праздником ребят . Мне необходимо сделать анимацию для svg картинки как у этого шаблона https://www.behance.net/gallery/82883419/NSH?track... у элементов вверху Движение волнообразное.

Comments

[Rustam Bainazarov]

Что за праздник?

Update. Ай, тьфу.

Answer 1

[Максим]

В общем рисовать это всё я не буду но расскажу что надо открыть любой векторный редактор и нарисовать любой контур, и анимировать его вот таким способом : первый способ - листочек а второй контур то есть анимация произвольного шейпа делается вот так : анимация шейпа это не сложно

Но можно пойти более лёгким путём, скачать дэмо версию after efects и установить bodymovien и там обычное перетаскивание контуров в общем мануалов в сети куча особенно по bodymovien

Comments

[WebN00b]

а реально это сделать с обычным блоком?

[Максим]

WebN00b, нет, только svg canvas или webgl

[WebN00b]

Максим Ленский, если я скачаю adobe after effects, я могу импортировать эту анимацию в html/css?

[Максим]

WebN00b, в ae сгенерируется json вот в нём будет анимация

[WebN00b]

друг, помоги мне пожалуйста, ибо я тупой овощь. Из https://www.behance.net/gallery/82883419/NSH?track... . МНе нужно взять такую анимацию и подставить в шлейфы
https://mrfuzzybot.github.io/build/index.html
Я не знаю как анимировать svg и path.

[Максим]

WebN00b, что такое шлейфы ?

[WebN00b]

Максим Ленский, можно с тобой в телеграме поговорить?

[Максим]

WebN00b, почта в личке

Answer 2

[Михаил BALL]

Нужен js на одном css это не сделать.

Answer 3

[lagudal]

Смотрите в сторону "svg morphing" - в принципе конкретно похожие шейпы можно анимировать без js, мороки только больше будет и нужно следить за координатами точек внимательно, иначе может так получиться, что анимация будет рывком.
С js библиотеками проще.