title: Animating straight SVG path into curved?
body: <p>I have two SVG's, both made out of 3 lines.</p>
  
  <p>In the first SVG the lines are straight: </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-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
   .st0{fill:#FFFFFF;}
   .st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;}
  &lt;/style&gt;
  &lt;g&gt;
   &lt;path class="st0" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/&gt;
   &lt;path class="st1" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/&gt;
  &lt;/g&gt;
  &lt;g&gt;
   &lt;path class="st0" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/&gt;
   &lt;path class="st1" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/&gt;
  &lt;/g&gt;
  &lt;g&gt;
   &lt;path class="st1" d="M0,59.9h77c27.5,0,72.5,0,100,0h823"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in the second one I have the same three lines but just braided together:</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-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
   .st0{fill:#FFFFFF;}
   .st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;}
  &lt;/style&gt;
  &lt;g&gt;
   &lt;path class="st0" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/&gt;
   &lt;path class="st1" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/&gt;
  &lt;/g&gt;
  &lt;g&gt;
   &lt;path class="st0" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/&gt;
   &lt;path class="st1" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/&gt;
  &lt;/g&gt;
  &lt;g&gt;
   &lt;path class="st1" d="M0,59.9h77c27.5,0,69.8,10.7,94,23.8l660,356.5c24.2,13.1,66.5,23.8,94,23.8h75"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm wondering if there is some kind of transition feature? Or how else it would work</p>