<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:calc(100% - 20px); height:300px; padding:10px; ">
<path d="M0 0 C191.8 0, 191.8 0, 383.5 0 M383.5 0 C575.3 0, 575.3 80, 767 80" stroke="-sharp00BFC5" fill="none" stroke-width="3">
<animate attributeName="d" attributeType="XML" to=" M0 40 C127.8 40, 127.8 0, 255.7 0 M255.7 0 C383.5 0, 383.5 40, 511.3 40 M511.3 40 C639.1 40, 639.1 80, 767 80" begin="0s" dur="1s" fill="freeze"></animate>
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:calc(100% - 20px); height:300px; padding:10px">
<path d="M0 80 C127.8 80, 127.8 0, 255.7 0 M255.7 0 C383.5 0, 383.5 0, 511.3 0 M511.3 0 C639.1 0, 639.1 66.7, 767 66.7" stroke="-sharp00BFC5" fill="none" stroke-width="3">
<animate attributeName="d" attributeType="XML" to=" M0 40 C127.8 40, 127.8 0, 255.7 0 M255.7 0 C383.5 0, 383.5 40, 511.3 40 M511.3 40 C639.1 40, 639.1 80, 767 80" begin="0s" dur="1s" fill="freeze"></animate>
</path>
</svg> the first one is a curve animation that changes from 3 points to 4 points, and you will see it get stuck for a while.
the second is a curve animation that changes from 4 points to 4 points, which is very smooth and no problem.
is there any way to turn 3 points into 4-point curve animation, but also become very smooth and no problem? thank you
add: 3 to 4 points is just an example, it is possible to have 30 to 4 points, 10 to 40 points is possible, so it is necessary to use a general method.