How to smoothly fill an SVG background?

Question

css

I found an example on YouTube https://www.youtube.com/watch?v=gQQIkkREdoM with an interesting animation, how can I fill in svg by analogy? The picture will be different, the point is that the background fills in smoothly, for the amount of time I need

Thank you

Answer 1

As far as I know, the standard capabilities of html and css cannot solve such a problem.
Look here. The guys are doing similar things
-------------------------------
SVG has its own native animation by the way ( see here )
But there is a problem with cross-browser compatibility.
-------------------------------
Another possible option is to draw on the canvas. But you need to have the relevant knowledge.
-------------------------------
After all this, the usual GIF seems not such a bad option :)