How to create line in the center on scroll with circle in SVG and how to decrease the speed of drawing?

For creating a circle on page scroll with line I am doing like this:

var createShape = document.getElementById("shape");
var length = createShape.getTotalLength();
shape.style.strokeDasharray = length;
shape.style.strokeDashoffset = length;
window.onscroll = function myFunction() {
  var scrollpercent = (document.body.scrollTop) /
      ( document.documentElement.scrollHeight -
       document.documentElement.clientHeight );
  var draw = length * scrollpercent;
  shape.style.strokeDashoffset = length - draw ;
}

.scroll_text {
  font-family: "arial";
  font-size: 25px;
  font-weight: bold;
  color: rgba(241, 71, 71, 1);
  text-align: center;
}

<p class="scroll_text">Please  Scroll</p>
<svg id="mySVG" width="1500px" height="1500px">
  <path d="M 500, 500
           m 20, -190
           a 20,20 0 1,0 1,0
           Q 520 800, 520 800
           a 20,20 0 1,0 1,0
           Q 520 1200, 520 1200
           a 20,20 0 1,0 1,0
           Q 520 1500, 520 1500"
        fill="none" stroke="#000" stroke-width="2px" id="shape"/>           
</svg>

But the problem is my line is intersecting the circle. So, for this i want to fill my circle when my circle finishes up. but for this if I give "fill" then it shows colour. What should I do? I am new to SVG.

Here is the link: http://codepen.io/VishakhaNehe/pen/ezBoGW