Svg Path D animation not working, pls help?

Question

Animation

There is SVG. I'm working with SVG animation for the first time, on the Internet I dug up information on animation methods, but it's all kind of superficial, but nothing is explained. Can you help me animate Path? I'm trying to make it draw from the start to the end point. It's just a curved line on svg. I'm trying to do that, but it doesn't work. I don't want to use JS. So either or CSS.
If anyone can link to documentation with good explanations, please do.

<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

1. You have a crippled path there. I had to throw out half of the points.
2. Waypoints are not animated in the way you are trying here. Here you need to use stroke-dasharray and stroke-dashoffset.
3. Here's an example from your path, tinker around.