title: SVG morphing with anime.js
body: <p>I'm trying to make an SVG animation where first I draw the animation in Adobe illustrator then I get the code and animate it with anime.js.</p>
  
  <p>I'm animating (changing) only the "d" attribute in the SVG.
  I encountered a problem as same as the problem in the tutorial I was following:</p>
  
  <p><strong><a href="https://youtu.be/LKwXoaFwYFk?t=1160" rel="nofollow noreferrer">youtube tutorial (19:20)</a></strong> </p>
  
  <p>Seems my SVG code is not exported properly or I'm doing something wrong with the anchor points.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>StartUpTimeline.add({
    targets: morph,
    d: [
     { value: 'M0,0,1,360S184,253,440,254c245,1,346,236,520,236,182,0,277-189,559-189,183,0,402,100,402,100V1Z' },
    ],
    easing: 'easeInQuint',
    duration: 1500,
   })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="morph" height="100%" width="100%" viewbox="0 0 1920 1080" preserveAspectRatio="none"&gt; 
        &lt;path class="morph" fill="#002e3a" 
     d="M0,0H1S184-1,440,0C685,1,786,0,960,0c182,0,246,1,528,1h433Z"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>