SVG — Motion Paths

Make anything travel along an arbitrary curve with <animateMotion>. The killer attribute is rotate="auto" — it turns the traveler to face its direction of travel.

orient="auto" vs fixed — same path, same speed

duration 5s

▮ rotate="auto" — faces travel direction ▮ no rotate — stays upright

animateMotion + mpath

<path id="road" d="M30 200 C120 40, 300 40, 360 140 ..." />

<g>
  <polygon points="0,-9 20,0 0,9 5,0" fill="#c8ff00"/>
  <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
    <mpath href="#road"/>   <!-- reuse an existing path by id -->
  </animateMotion>
</g>

<!-- CSS equivalent (modern):  offset-path: path('...'); offset-rotate: auto; -->

Both arrows are point-identical in position at every instant — only rotate="auto" differs. Notice how the green arrow banks through the S-curve while the blue one slides sideways. Drag duration to change speed; Replay calls setCurrentTime(0).