How to solve the problem with animation braking?

Question

css

Tell me how to make the animation in the figures smoother https://jsfiddle.net/Chefranov/5p6xt6zd/
Or maybe there is another option to create such a figure with animation.
Animation is needed by analogy as here
You can also solve it using JS
Thank you in advance!

Answer 1

Do like on the site you provided, you don't need svg for this purpose

Answer 2

mb to begin with, take it out of fill and svg
, it turns out to be too heavy a bunch (more precisely, not heavy, but simply unoptimized)
Rather, you should try canvas for such perversions
stackoverflow.com/questions/18379818/canvas-image-...
blog.teamtreehouse.com/create- vector-masks-using-t...
and use animationFrame