<svg viewBox="0 0 86 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 0 L4 44 C4 60 16 80 43 50 C70 20 82 40 82 56 L82 100" stroke="red" stroke-width="8" fill="none" />
  <circle cx="0" cy="0" r="2" fill="black">
    <animateMotion path="M4 4 L4 44 C4 60 16 80 43 50 C70 20 82 40 82 56 L82 96" dur="5s" begin="indefinite" />
  </circle>
</svg>

svg {
  height: 120vh;
  margin-left: 100px;
}

onscroll = () => {document.querySelector("animateMotion").beginElement();};