Animate SVG, or how to make a smooth transition?

Good afternoon.
The question is how to make a smooth transition or why in my example the transition is not happening smoothly.

At the time, already had a response Animation of SVG, how to make smooth?
Did as there tried using @keyframes all in vain.

The following is my example.
<svg viewBox="0 0 100.7 229.7">
 <path class="st0" d="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12 z">
 <animate attributeName="d" from="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12 z" to="M57.7,12 h-21c0,0,13,25,12,60 s-13.7,43.5-14,72 c-0.4,40.7,12.5,76.5,12.5,76.5 s-7.1-33.7-2.3-75.1C48,117.7,61.7,105,63.7,71C65.7,37,57.7,12,57.7,12 z" begin="mouseover" end="mouseout" dur="3s"/>
</path>
 </svg>
June 5th 19 at 21:32
1 answer
June 5th 19 at 21:34
You need to change the path, that is exactly how it will change your figure, now it is displayed horizontally, the duration(dur) does not play a role.
Will see how to make more complex examples - mathew.Ebert63 commented on June 5th 19 at 21:37
That is, you offer to split the storyboard into several stages? - allene_Lubowitz commented on June 5th 19 at 21:40
Yes now it turns out that you have a set start and end point and they are quite different. You need to break. - mathew.Ebert63 commented on June 5th 19 at 21:43
there's a good service can help https://app.svgator.com/ - mathew.Ebert63 commented on June 5th 19 at 21:46
thanks for the info, I will understand. - allene_Lubowitz commented on June 5th 19 at 21:49
another question, if you don't mind the example which I showed above. There does not change the basic point. The question is how well implemented here https://codepen.io/felixhornoiu/pen/dovub I postavljaju your option and again all shift hard. - allene_Lubowitz commented on June 5th 19 at 21:52

Find more questions by tags SVGHTMLCSSAnimation