CSS offset-path Property

The offset-path CSS property defines a geometric path along which an element can be positioned and moved. It is part of the Motion Path Module, a set of CSS properties that let you animate an element along an arbitrary path — a curve, a line, or the outline of an SVG shape — instead of being limited to straight top/left transitions.

On its own, offset-path only describes the track. The element's actual location along that track is set by the offset-distance property (0% = start of the path, 100% = end). Animating offset-distance from 0% to 100% is what makes the element travel the path.

When would I use it?

Reach for offset-path when you want motion that follows a real curve and would be painful to express with keyframed transform: translate() steps — for example a planet orbiting along an ellipse, a marker sliding along a winding road, or an icon looping around an SVG logo. Because the browser interpolates position along the path, the motion stays smooth no matter how complex the curve is.

In the earlier draft of the specification this property was called motion-path. It was renamed to offset-path because the property defines static positions on a path (the animation comes from offset-distance), and the old motion-* names are now deprecated.

Info

The offset-path property itself is not animatable — it only defines the path. The movement is produced by animating offset-distance (typically with a @keyframes rule), while offset-rotate controls whether the element turns to face the direction of travel.

If you have defined offset-path in CSS, you can also drive the movement from JavaScript by updating offset-distance over time.

The Motion Path module works as a small family of properties — offset-path is the centre of it:

offset-distance — how far along the path the element sits.
offset-rotate — whether the element rotates to follow the path's direction.
offset-position — the starting point used when the path itself is relative.
offset-anchor — which point of the element is glued to the path.
offset — the shorthand that sets all of the above at once.

Initial value	none
Applies to	Transformable elements.
Inherited	No.
Animatable	No.
Version	Motion Path Module Level 1
DOM syntax	`object.style.offsetPath = "ray()";`

Syntax

offset-path: none | ray() | path() | url() | <basic-shape>;

A few notes on the path functions:

path("...") takes an SVG path string (the same d attribute syntax used by <path>). It is the most flexible option and is the best supported.
ray(45deg) draws a straight line from the element's start position outward at the given angle.
url(#myPath) reuses the geometry of an SVG shape already in the document, referenced by its id.
A <basic-shape> such as circle(), ellipse(), inset() or polygon() lets you build common paths without writing raw SVG.

Example: animating along an SVG path

Here the green-and-blue square follows a curved SVG path. The @keyframes rule drives offset-distance from its default 0% up to 100%, and offset-rotate: reverse keeps the square turned along the curve as it moves.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Example: placing elements at fixed points on a path

You don't have to animate the path at all. Setting a fixed offset-distance simply parks the element at that point along the track — useful for laying boxes out along a shared curve.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>

Try it Yourself »

Values

Value	Description
`none`	No motion path is specified. This is the default value.
`ray()`	A line segment that starts from the position of the box and proceeds in the direction defined by the specified angle, e.g. `ray(45deg)`.
`path()`	An SVG path string, e.g. `path("M 0 0 L 100 100")`, used directly as the path.
`url()`	References the `id` of an SVG shape to be used as a movement path, e.g. `url(#myPath)`.
`<basic-shape>`	A shape function: `circle()`, `ellipse()`, `inset()`, or `polygon()`.

Browser support

offset-path is supported in all current versions of Chrome, Edge, Firefox, Safari, and Opera. The path() value is the most widely implemented; support for ray() and <basic-shape> values arrived later, so test those when targeting older browsers. The legacy motion-path name is deprecated and should not be used.

Practice

What does the CSS offset-path property do?

It determines the path an element will follow during a CSS animation or transition.It adjusts the color of an element during a CSS animation or transition.It determines the shape and position of an element on a webpage.It can make an element to move along a defined path.