Как реализовать svg анимацию с заменой path?

Question

[lebedevweb]

Здравствуйте, не получается сделать плавную замену path внутри svg.

1. Хотел реализовать через @keyframes, но анимация работает только в crome и только в песочнице: https://jsfiddle.net/7wvuj4sp/
2. Второе решение было сделать через animate со сменой координат фигуры через values. Работает в crome, opera и firefox, но отсутствует плавный переход между отображениями координат.
https://jsfiddle.net/aw6z4mtg/17/

Подскажите что делаю не так и как можно исправить код?

UPD: исправлена вторая ссылка

Answer 1

[lebedevweb]

Нашел в чем причина. Переработал 2й вариант:

2. Второе решение было сделать через animate со сменой координат фигуры через values. Работает в crome, opera и firefox, но отсутствует плавный переход между отображениями координат.
https://jsfiddle.net/aw6z4mtg/17/

Ошибка состояла в том, что координаты в values имели разный набор точек (фактически подставлялись разные объекты), поэтому никакого перехода не было.
В новой версии объект содержит одинаковый набор точек с измененными координатами.

https://jsfiddle.net/

Answer 2

[Антон Шаманов]

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