How do I have an animated object follow a path in html

Question

I’m just getting back into coding (and I’m horrible at it but practice makes mediocre) and I’m having trouble figuring out how to make an object like an svg square follow an animation path like as if it were to move across the screen and changing direction at three points
https://code.sololearn.com/WpIgQKYtnARY/?ref=app

Answer 1

Use animateMotion inside rect tag to set animation to follow a outside path tag

<svg width="1000" height="500">
<path id="path1" d="M 0 0 L200 200 L200 0 Z" style="stroke:#eee; fill:none;" />

<rect width="100" height="100" fill="pink">

<animateMotion dur="10s" repeatCount="indefinite"> <mpath xlink:href="#path1"/> </animateMotion>
</rect>

</svg>

https://code.sololearn.com/WRVoPINU8Siu/?ref=app