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

Question

[mrHalid]

Как сделать плавную анимацию жидкости такого рода?:

Сама анимация должна быть бесконечной.

Comments

[sim3x]

А покажите пример такой анимации

[longclaps]

sim3x, он хочет, чтобы волны волновались. Щас попробую, от дел отдохну.

[sim3x]

longclaps, -___-"

[mrHalid]

sim3x, Да, они должны просто медленно волноваться) Не нашел к сожалению примера

[mrHalid]

longclaps, Спасибо, буду рад)

Answer 1

[GreatRash]

Туториал.

Answer 2

[Ivan Bogachev]

Вот вам наглядный пример того, как все будет тормозить, вплоть до зависания страницы, если применить фильтры и все немного увеличить (и не говорите, что на вашем 12ядерномразогнанноммакпро не тормозит - у пользователя его не будет). Поэтому если выбор пал на SVG - анимируйте path, а потом заливайте его градиентом, как это и сделано на картинке. В простейшем виде можно сразу нарисовать десяток состояний каждой кляксы и последовать примерам из вот этой статьи.

Answer 3

[Odisseya]

filter + animate: https://codepen.io/Odisseya/pen/oqGKxW