SVG Path Scroll Draw

<div class="spsd-outer">
  <div style="height:50vh;"></div>
  <div class="spsd-wrap" id="spsd-wrap">
    <svg class="spsd-svg" viewBox="0 0 300 200" width="300" height="200">
      <path id="spsd-path" d="M10 100 Q80 10 150 100 T290 100" fill="none" stroke="#6366f1" stroke-width="3" stroke-linecap="round"></path>
    </svg>
  </div>
  <div style="height:150vh;"></div>
</div>

body { padding: 0 !important; }
.spsd-outer { width: 100%; }
.spsd-wrap {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 40vh;
}
.spsd-svg { display: block; }

const path = document.getElementById('spsd-path');
const wrap = document.getElementById('spsd-wrap');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
function onScroll() {
  const rect = wrap.getBoundingClientRect();
  const progress = Math.max(0, Math.min(1, 1 - (rect.top / window.innerHeight)));
  path.style.strokeDashoffset = length * (1 - progress);
}
window.addEventListener('scroll', onScroll);
onScroll();