SVG animateMotion: Building an Animated Race Track

Modern HTML and SVG features allow browsers to handle animation tasks that previously required dedicated tools like Flash. One such capability is the SVG <animateMotion> element, which enables you to define a motion path for elements to follow. In this post, we explore how this works by building an animated race car scene inspired by the old Motion Guide technique.

Here’s the project that demonstrates the concept:

Three animated cars in blue, green and pink following dashed lines
A simple example of what can be achieved using animateMotion. (See animation)

The Basic Structure

A simplified version of the project shows how the pieces fit together. The key insight is that you place an <animateMotion> element inside an SVG <g> group, alongside the visual element that should move.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Example</title>
  </head>
  <body>
    <main>
      <svg viewBox="0 0 307 184" xmlns="http://www.w3.org/2000/svg">
        <g id="track">
          <g id="track-lines">
            <path fill="none" stroke="#facc15" d="M167.88,111.3..." />
          </g>

          <g id="pink-car">
            <animateMotion dur="4s" repeatCount="indefinite" rotate="auto" path="M167.88,111.3..." />
            <path fill="#EC4899" d="M13.71,18.65c0.25-0.5..." />
          </g>
        </g>
      </svg>
    </main>
  </body>
</html>

In the example above, the <g> with id="track-lines" defines the yellow dashed path representing the track. Another <g>, id="pink-car", contains an <animateMotion> whose path attribute uses the same coordinates as the track lines.

The <animateMotion> element is invisible — its sole function is to supply the path. Beneath it, a regular <path> draws the pink car, which then follows the path set by its sibling <animateMotion> element.

Key Attributes of animateMotion

The <animateMotion> element accepts a few important attributes:

  • dur: Sets the duration of the animation cycle.
  • repeatCount: Controls how many times the animation loops.
  • rotate: Orients the moving element relative to the path, ensuring it faces the direction of motion.
  • path: The actual path definition the element will follow.
<circle r="5" fill="red">
  <animateMotion
    dur="10s"
    repeatCount="indefinite"
    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>

The official MDN example places <animateMotion> as a child of an SVG <circle>. That works for shapes, but not for elements like <path> which cannot have children. Wrapping both elements inside a <g> group solves this by establishing the coordinate system and indicating which elements should follow the path.

Practical Considerations and Accessibility

Building a full track like the preview involves designing assets—such as the track and cars—in a vector tool like Adobe Illustrator, then exporting the whole composition as an SVG. A small refactor is often required to position each car next to its corresponding <animateMotion> element, but the core concept remains simple.

One important limitation is that <animateMotion> doesn’t natively respect the prefers-reduced-motion CSS media query. As a workaround, the preview applies a media query that sets elements with the class car to display: none;. This isn’t perfect but ensures the animation is safe for users who prefer reduced motion.