W3docs
en
Log in

CSS offset-path Property

Use the offset-path CSS property for specifying path for an element to follow. Read about property values and try examples.

The offset-path CSS property is used to specify a movement path for an element to follow and defines the element's position.

The position on the path is determined by the offset-distance property.

In the earlier versions of the specification, the name of offset-path was ''motion-path''. However, it was changed to offset-path as the property specifies static positions.

Info

The offset-path property itself is not animatable; it only defines the path. Animation is controlled via the offset-distance property.

If you have defined offset-path in CSS, you can use JavaScript to control the animation.

Initial valuenone
Applies toTransformable elements.
InheritedNo.
AnimatableNo.
VersionMotion Path Module Level 1
DOM syntaxobject.style.offsetPath = "ray()";

Syntax

CSS offset-path syntax

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

Example of the offset-path property with the offset-rotate and animation properties:

CSS offset-path code example

<!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 of the offset-path property:

CSS offset-path another code example

<!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

ValueDescription
noneNo motion path is specified. This is the default value.
ray()A line segment which starts from the position of the box and proceeds in the direction defined by the specified angle.
url()References the ID of an SVG element to be used as a movement path.
<basic-shape>Specifies a shape which includes: circle(), ellipse(), inset(), polygon(), or path().

Practice

Practice

What does the CSS offset-path property do?