How to implement svg animation with path replacement?

Question

css

Hello, it's not possible to make a smooth replacement of path inside svg.

1. I wanted to implement it using @keyframes, but the animation works only in crome and only in the sandbox: https://jsfiddle.net/7wvuj4sp/
2. The second solution was to do it through animate with changing the coordinates of the figure through values. Works in crome, opera and firefox, but there is no smooth transition between coordinate displays.
https://jsfiddle.net/aw6z4mtg/17/

Tell me what I'm doing wrong and how can I fix the code?

UPD: second link fixed

Answer 1

Found the reason. Reworked the 2nd option:

2. The second solution was to do it through animate with changing the coordinates of the figure through values. Works in crome, opera and firefox, but there is no smooth transition between coordinate displays.
https://jsfiddle.net/aw6z4mtg/17/

The error was that the coordinates in values ​​had a different set of points (in fact, different objects were substituted), so there was no transition.
In the new version, the object contains the same set of points with changed coordinates.
https://jsfiddle.net/

Answer 2

https://svgjs.dev/docs/3.0/animating/
https://jsfiddle.net/Fuzzy/f2wbgx5a/