title: SVG animate from circle to line
body: <p>I want to shape a circle to a line (path).<br>
  Is this possible?</p>
  
  <p>Maybe it's the way I Google that might be the problem.</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;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"&gt;
    &lt;title&gt;circle&lt;/title&gt;
    &lt;circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The best way (for me) would be if the top and bottom come together.<br>
  But I'm more interested on how to do this! I couldn't find anything on how to shape the svg element</p>
  
  <p>--------- SMALL UPDATE ----------<br>
  Just found <a href="https://webdesign.tutsplus.com/tutorials/how-to-use-animatetransform-for-inline-svg-animation--cms-22296" rel="nofollow noreferrer">this</a>. It might help me get a direction.</p>
  
  <p>--------- SMALL UPDATE ----------<br>
  So I tried to do this without JQuery but I think it won't work.
  The reason for thsi is because my JQuery sucks....
  Can anybody help me out with some JQuery fix?</p>