title: Animate a circle with the growth of <path> on scroll
body: <p><em>Question updated</em></p>
  
  <p><strong>This what I have done so far.</strong></p>
  
  <p>It works fine but I want to do an <em>animation</em> which is little much complicated for me.  </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>// Get the id of the &lt;path&gt; element and the length of &lt;path&gt;
  var myline = document.getElementById("myline");
  var length = myline.getTotalLength();
  
  // The start position of the drawing
  myline.style.strokeDasharray = length;
  
  // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
  myline.style.strokeDashoffset = length;
  
  // Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
  window.addEventListener("scroll", myFunction);
  
  function myFunction() {
    // What % down is it?
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    // Length to offset the dashes
    var draw = length * scrollpercent;
  
    // Reverse the drawing (when scrolling upwards)
    myline.style.strokeDashoffset = length - draw;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 2000px;
    background: #f1f1f1;
  }
  
  #mySVG {
    position: fixed;
    top: 15%;
    width: 100vw;
    height: 100vh;
    margin-left: -50px;
  }
  
  .st0 {
    fill: none;
    stroke-dashoffset: 3px;
    stroke: red;
    stroke-width: 5;
    stroke-miterlimit: 10;
    stroke-dasharray: 20;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Scroll down this window to draw my path.&lt;/h2&gt;
  &lt;p&gt;Scroll back up to reverse the drawing.&lt;/p&gt;
  
  &lt;svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible"&gt;
    &lt;path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /&gt; Sorry, your browser does not support inline SVG.
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what I want is to animate a <code>&lt;circle&gt;</code> with the growth of the <code>&lt;path&gt;</code> like <a href="https://i.stack.imgur.com/BIQZ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BIQZ3.png" alt="this"></a></p>
  
  <p>I know the path is growing using the <code>strokeDasharray</code>. But still, is there a way to attain what am looking for.? if no then please do suggest another way. thank you..!</p>