Как сделать эффект волны?

Question

[Space Around]

Не знаю при помощи чего и как реализовать данную анимацию. Нужно анимировать края данной фигуры, как хаотичная волна.

Вот пример с Dribbble: тык
Например, в Siri есть данный эффект, когда говоришь, но там прямая линия, а мне нужно по кругу.

Comments

[Vitaliy]

какое отношение к вопросу имеет пример на Dribbble? Там же окружности с transform: scale, не более

[Space Around]

Виталий Столяров, я уже нашёл решение, но всё равно поясню. Если Вы посмотрите, то окружности помимо изменения размера, ещё имею эффект волны вдоль длины окружности

[Vitaliy]

Максим Виксна, там нет никакого эффекта. Форма фигуры не меняется (проверьте в графическом редакторе, наложив окружность), меняется только масштабирование по одной оси и поворот

[Space Around]

Виталий Столяров, хорошо

Answer 1

[hzzzzl]

должно помочь
https://css-tricks.com/blobs/

Comments

[Space Around]

Офигеть! Спасибо большое, самое то!!!

[Space Around]

hzzzzl, можете посоветовать статью, где расскажут про анимации. На данный момент, я могу сделать анимации при помощи CSS (на чистом, незамороченном CSS достаточно сложно сделать что-то реально крутое), JS (тут без библиотек никуда, но в большинстве случаев, возможности которые дают библиотеки не подходят. Например, если смотреть анимации на Dribbble), и знаю ещё один вариант: делаешь анимацию в Adobe After Effects, потом в bodymovin и получаешь 2 файла (html и JSON), которые вставляешь на сайт, но не понятно как управлять этим всем по времени, оно там зацикливается и всё. Хочется листать Dribbble, видеть крутые анимации и понимать, что ты знаешь, как это сделать. Знаю, что лучше использовать что-то готовое, т.к. в большинстве случаев, оно будет работать в разы стабильнее, но всё же...

[hzzzzl]

Максим Виксна, неа, это и для меня огромный пробел :(
просто видел что svg можно так анимировать и легко было найти

Answer 2

[Lord_Dantes]

svg