I have a similar question to one of my previous threads:
I would like to have the black ball move inside the red outline as the user scrolls down the page, but not sure how to do this. I also have a version that is a solid red shape, but I guess if I can get the principle of how to do it, I can apply it to the solid one.
The following is only supported in Chrome at the moment but you could do this with css using the scroll-timeline.
It just means using the path in the svg as the offset-path in the css and then animating the offset path.
This basically means that you don’t need any calculations as you can use the svg path although I think you could have simplified the path as a solid line.
It’s much the same as that old letter M animation I did for you.
If you wanted full browser support then instead of the scroll-timeline in the css you could use JS and dynamically update the offset-distance in the css (use a variable) and base it on the scroll of the document.
You could consider using <animateMotion>. Here is a demonstration of the ball moving when scrolling starts: I think this will work on all modern browsers.