12.10 The <animateMotion> Element

The <animateMotion> element allows to animate an object along an arbitrary path.

If you want to use <animateMotion> for straight-line motion, you simply set the from and to attributes, assigning them each a pair of (x,y) coordinates. The coordinates specify the position where the (0,0) point of the shape's coordinate system will be moved, similar to how translate(x,y) works.

Example 1. Animation along a linear path 
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <use href="grids.svg#grid_100x100"/>
    <g>
    <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/>
    <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;"/>
    <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
    </g>
</svg>
Example 2. Animation along a complex path 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <use href="grids.svg#grid_200x200"/>
    <!-- show the path along which the triangle will move -->
    <path id="thePath" d="M 10,100 C 100,25 120,180, 190, 110" style="fill: none; stroke: green;"/>
    <!-- Triangle to be moved along the path. Along the path goes the point (0,0) >
    <path d="M -4 0 L 4 0 L 0 -6.8 Z" style="fill: orange; stroke: red;">
        <animateMotion dur="6s" fill="freeze">
            <mpath href="#thePath"/>
        </animateMotion>
    </path>
</svg>

If you would prefer that the object tilt so its x-axis is always parallel to the slope of the path, just add the rotate attribute with a value of auto to the element.

Example 3. Animation along a complex path 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <use href="grids.svg#grid_200x200"/>
    <!-- show the path along which the triangle will move -->
    <path id="thePath" d="M 10,100 C 100,25 120,180, 190, 110" style="fill: none; stroke: green;"/>
    <!-- Triangle to be moved along the path. Along the path goes the point (0,0) >
    <path d="M -4 0 L 4 0 L 0 -6.8 Z" style="fill: orange; stroke: red;">
        <animateMotion dur="6s" fill="freeze">
            <mpath href="#thePath"/>
        </animateMotion>
    </path>
</svg>
More about the <mpath> element

The <mpath> element is a child of <animateMotion> that references an external path by ID, instead of defining the path inline.

Two ways to specify the motion path:

1. Inline path attribute:

<animateMotion dur="6s" fill="freeze"
    path="M 10,100 C 100,25 120,180, 190, 110"/>

2. <mpath> child element:

<animateMotion dur="6s" fill="freeze">
    <mpath href="#thePath"/>
</animateMotion>
Advantages of <mpath>:
  • Reusability — Reference the same path from multiple animations
  • Single source of truth — Update the path in one place
  • Smaller file size — No duplication of complex path data
  • Visible path — The referenced path can be displayed (like the green curve in examples above)
Key points:
  • Uses href (or xlink:href for older browsers) to reference a <path> element by ID
  • The referenced path must exist in the document
  • If you don't want the path visible, place it inside <defs>
Limitation: No external file references

Unlike <use>, the <mpath> element cannot reference paths in external files:

ElementExternal fileSame document
<use>✅ href="file.svg#id"✅ href="#id"
<mpath>❌ Not supported✅ href="#id"

Workaround: Define the path in <defs> within the same document.

The (0,0) point follows the path

When using <animateMotion>, the origin (0,0) of the element's coordinate system travels along the path. The shape is drawn relative to that origin.

Example:

The triangle in the examples above is defined centered around (0,0):

<path d="M -5 0 L 5 0 L 0 -8.5 Z" .../>
  • The triangle spans from -5 to +5 on the x-axis
  • The point (0,0) is at the bottom center of the triangle
  • This (0,0) point is what follows the motion path
Practical tip:

Design your shape so that the point you want to follow the path is at (0,0). For example:

  • Center follows path: Define shape from (-width/2, -height/2) to (width/2, height/2)
  • Top-left follows path: Define shape from (0,0) to (width, height)

This is similar to how translate(x,y) works — it moves the element's coordinate system origin.

The rotate attribute values

The rotate attribute controls how the object is oriented as it moves along the path:

ValueDescription
autoObject rotates to align its x-axis with the path's tangent direction
auto-reverseSame as auto, but rotated 180° (object faces backward along the path)
<number>Fixed rotation angle in degrees (e.g., rotate="45") — object maintains this angle throughout

Default: If rotate is not specified, the object maintains its original orientation (equivalent to rotate="0").