SVG Morphing animation giving really weird results

Question

anime({
            targets: ".a",
            d: [
                {value: "M0,0,33.32,31.1l89.963,43.315L146.606,0Z"}
            ],
            easing: "easeOutQuad",
            duration: 2000,
            loop: false,
        });

  html, body {
            margin: 0;
            padding: 0;
        }

        svg {
            margin-top: 100px;
        }

        path {
            fill:none;
            stroke:#8103ff;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>



<svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path class="a" d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
<br>
<h5>The SVGs in their raw forms: </h5>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0,33.32,31.1l89.963,43.315L146.606,0Z">
 </svg>

So I have this SVG that I want to morph, with anime.js. And also, the SVG code is exported via Adobe XD.

I'm having trouble realising SVG morphing animations of any kind. Even the easiest ones. The end result is weird.

I tried searching on Stack Overflow and other sites but I didn't really find anything that could fix my problem. I tried redrawing the shape 10 times carefully, looking to draw the same amount of Anchor Points on both of the SVGs. But it's still failing to draw the animation properly.

Let's say I have these 2 SVGs, having experienced really "suttle" changes.

Thing is, I'd expect them to go gracefully from one state to another but instead they just morph out of place and weirdly. Is it something that I'm doing wrong? Thanks.

Answer 1

Sometimes points get reduced and or flipped when saving a vector as an svg. It sucks when trying to morph between shapes. Try this:

https://shapeshifter.design/.

Import your initial shape then click on animate path. Then in the from to portion paste in the path data for the second shape then if there are issues add points as necessary then drag the points around to a position that makes the paths compatible.

Then add another path animation with the results from the last one as the from and paste the data for the third morph position in the to area then edit.

Once satisfied you can copy and paste the path data that is working into your project.