<div class="space"></div>    
<svg width="800" height="600">
      <path
        id="myPath"
        d="M10 80 Q 95 10 180 80 T 330 80"
        stroke="limegreen"
        stroke-width="1"
        fill="none"
        stroke-dasharray="400"
        stroke-dashoffset="400"
      ></path>
    </svg>

.space{
  height:800px;
}
      path {
        transition: stroke-dashoffset 0.7s;
      }

      window.addEventListener("scroll", () => {
        var scrollPercentage =
          (document.documentElement.scrollTop + document.body.scrollTop) /
          (document.documentElement.scrollHeight -
            document.documentElement.clientHeight);
        var drawLength = 400 * scrollPercentage;
        var path = document.getElementById("myPath");
        path.style.strokeDashoffset = 400 - drawLength;
      });