How to make fluid animation using SVG?

Question

Canvas

How to make smooth fluid animation of this kind?:

The animation itself should be infinite.

Answer 1

Tutorial .

Answer 2

Here is a clear example of how everything will slow down, up to the page freezing, if you apply filters and increase everything a little (and don’t say that it doesn’t slow down on your 12-core overclocked macro - the user will not have it). Therefore, if the choice fell on SVG - animate the path, and then fill it with a gradient, as is done in the picture. In its simplest form, you can immediately draw a dozen states of each blot and follow the examples from this article .

Answer 3

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