svg the animateMotion element

12.10 The `<animateMotion>` Element

Example 1. Variable speed motion along a path using keyPoints and keyTimes

Default speed along a path using keyPoints and keyTimes

<svg width="200" height="200" viewBox="0 0 200 200" 
          xmlns="http://www.w3.org/2000/svg">
    <use href="grids.svg#grid_200x200"/>
    <!-- path -->
    <path id="thePath" d="M 10,100 C 100,25 120,180, 190, 110" 
    style="fill: none; stroke: green;"/>
    <!-- triangle -->
    <path d="M -5 0 L 5 0 L 0 -8.5 Z" style="fill: orange; stroke: red;">
        <animateMotion
        dur="6s" fill="freeze"
            rotate="auto"
            calcMode="linear"
            dur="20s"
            fill="freeze">
            <mpath href="#thePath"/>
        </animateMotion>
    </path>
</svg>

keyPoints and keyTimes to vary the speed along a path

<svg width="200" height="200" viewBox="0 0 200 200" 
          xmlns="http://www.w3.org/2000/svg">
      <use href="grids.svg#grid_200x200"/>
      <!-- path -->
      <path id="thePath" d="M 10,100 C 100,25 120,180, 190, 110" 
      style="fill: none; stroke: green;"/>
      <!-- triangle -->
      <path d="M -5 0 L 5 0 L 0 -8.5 Z" style="fill: orange; stroke: red;">
          <animateMotion 
              dur="6s" fill="freeze"
              rotate="auto"
              keyPoints="0;.25;.5;.75;1"
              keyTimes="0;.75;.8;.9;1"
              calcMode="linear"
              dur="20s"
              fill="freeze">
              <mpath href="#thePath"/>
          </animateMotion>
      </path>
  </svg>

12.10 The <animateMotion> Element

12.10 The `<animateMotion>` Element