Svg Path D анимация не получается, pls help?

Question

[Сергей Миллер]

Есть SVG. С анимацией SVG работаю впервые, в инете нарыл инфу по способам анимации, но она вся какая-то поверхностная, только ничего не объясняется. Можете помочь мне анимировать Path? Пытаюсь сделать так чтобы он рисовался от начальной до конечной точки. Это просто кривая линия на svg. Пробую сделать так, но не получается. Не хотелось бы прибегать к JS. Поэтому либо либо CSS.

Если кто-то может дать ссыль на документацию с хорошими объяснениями, дайте.

<svg id="menu_line" viewBox="0 0 1920 906" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1054.45 713C1051.66 713 1048.84 712.959 1046 712.855L1046.07 710.265C1078.62 711.363 1106.73 706.163 1132.04 694.374C1209.38 658.323 1259.78 562.104 1308.49 469.056C1320.39 446.306 1332.71 422.79 1345.14 400.725C1411.98 282.109 1500.26 182.492 1600.45 112.628C1700.65 42.7431 1811.14 3.81228 1919.93 0L1920 2.58986C1697.87 10.3802 1483.7 159.722 1347.12 402.092C1334.71 424.116 1322.41 447.611 1310.5 470.34C1261.59 563.762 1211.01 660.353 1132.93 696.736C1109.53 707.654 1083.79 713 1054.45 713Z" fill="#640DBA">


<animate 
attributeName="d"
dur="5s"
repeatCount="indefinite"
from="M1054.45"
to="713Z"
values="M1054.45 713C1051.66 713 1048.84 712.959 1046 712.855L1046.07 710.265C1078.62 711.363 1106.73 706.163 1132.04 694.374C1209.38 658.323 1259.78 562.104 1308.49 469.056C1320.39 446.306 1332.71 422.79 1345.14 400.725C1411.98 282.109 1500.26 182.492 1600.45 112.628C1700.65 42.7431 1811.14 3.81228 1919.93 0L1920 2.58986C1697.87 10.3802 1483.7 159.722 1347.12 402.092C1334.71 424.116 1322.41 447.611 1310.5 470.34C1261.59 563.762 1211.01 660.353 1132.93 696.736C1109.53 707.654 1083.79 713 1054.45 713Z" />
</path>

</svg>

Answer 1

[origami1024]

1. У тебя там path калечный какой-то. Пришлось половину точек выкинуть.
2. Точки пути таким образом как ты тут пытаешься не анимируются. Тут нужно использовать stroke-dasharray и stroke-dashoffset.
3. Вот тебе пример из твоего path, ковыряйся.