<svg version="1.1" id="curve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 725.7 829.1">

  <path class="st0" d="M725.6,449.7c0-54.6-13.1-98.2-37.8-134.4c-32.1-44.8-77.8-74-125.7-80.1l-2-0.3c-57.5-6.4-115.9,20.4-173.4,79.7
    c-24.7,25.5-46,53.1-66.7,79.9c-13.1,16.9-25.5,33-38.7,48.6l-2.5,3.1c-32.2,38-68.7,81.1-111.9,84.3c-25.6,1.9-54.6-14.2-73.7-40.8
    c-21.1-29.4-20.7-65.6-20.1-107.4c0-4.5,0.1-8.8,0.1-13.3c0.3-50.1,1.1-101,1.8-150.2c1-70.8,2.1-144,2.1-216.2h-73.8c0,71.7-2.9,144.6-1.9,216.3
    c-0.7,49.2-1.4,100.3-1.8,150.6c0,4.3-0.1,8.6-0.1,12.8c-0.6,47.3-1.4,101,35.7,147.4c33.6,46.6,85.5,73.4,135.6,69.6
    c72.4-5.4,123-65.1,160-108.8l2.5-3c14.3-16.8,27.7-34.3,40.7-51.1c20.4-26.4,39.6-51.3,61.5-73.9c42.2-43.6,80-62.8,115.3-58.9
    l1.3,0.1c28.4,3.6,56.7,22.3,77.5,51.4c19.2,26.7,27.8,56.4,27.8,96.3v0.2l-0.3,379.3h69.9L725.6,449.7z" />
  <circle id="ball" r="34" fill="black"></circle>
</svg>

<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>

html,
body {
  margin: 0;
  padding: 0;
}
#curve {
  max-height: 100vh;
  width: auto;
  display: block;
  margin: auto;
}

.st0 {
  fill: #ec2426;
  stroke: #ec2426;
}

#ball {
  offset-path: path(
    "M725.6,449.7c0-54.6-13.1-98.2-37.8-134.4c-32.1-44.8-77.8-74-125.7-80.1l-2-0.3c-57.5-6.4-115.9,20.4-173.4,79.7 c-24.7,25.5-46,53.1-66.7,79.9c-13.1,16.9-25.5,33-38.7,48.6l-2.5,3.1c-32.2,38-68.7,81.1-111.9,84.3c-25.6,1.9-54.6-14.2-73.7-40.8 c-21.1-29.4-20.7-65.6-20.1-107.4c0-4.5,0.1-8.8,0.1-13.3c0.3-50.1,1.1-101,1.8-150.2c1-70.8,2.1-144,2.1-216.2h-73.8c0,71.7-2.9,144.6-1.9,216.3 c-0.7,49.2-1.4,100.3-1.8,150.6c0,4.3-0.1,8.6-0.1,12.8c-0.6,47.3-1.4,101,35.7,147.4c33.6,46.6,85.5,73.4,135.6,69.6 c72.4-5.4,123-65.1,160-108.8l2.5-3c14.3-16.8,27.7-34.3,40.7-51.1c20.4-26.4,39.6-51.3,61.5-73.9c42.2-43.6,80-62.8,115.3-58.9 l1.3,0.1c28.4,3.6,56.7,22.3,77.5,51.4c19.2,26.7,27.8,56.4,27.8,96.3v0.2l-0.3,379.3h69.9L725.6,449.7z"
  );
  animation: move 5s linear;
  animation-timeline: scroll();
  transform: translateY(-37px);
  offset-distance: 136%;
}

@keyframes move {
  0% {
    offset-distance: 136%;
  }
  20%,
  100% {
    offset-distance: 91%;
  }
}