How to use CSS offset-path

The offset-path CSS property specifies the position of an element along a path. It is used in conjunction with the offset-distance property, which specifies the distance of the element from the path. The offset-path property can be used to create interesting visual effects by animating the element’s position along the path over time.

You can use the offset-path property to make an element move along a circular path like this

#myDiv {
  offset-path: path("M 10 10 A 30 30 0 0 1 40 40");
  animation: move 5s linear forwards;
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}

The element with the ID “my-element” will move along a circular path with a radius of 30 pixels, starting at the point (10, 10) and ending at the point (40, 40). The animation will take 5 seconds to complete, and will run in a linear fashion.

The offset-path can also be defined with CSS shape like this

offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);

Offset Distance

The offset-distance CSS property specifies the distance of an element from a path. It is used in conjunction with the offset-path property, which specifies the path that the element should follow.

So adding offset-distance to previous example will make the animation starts at the midpoint of the path and end at 90% of the path

#myDiv{
  offset-path: path("M 10 10 A 30 30 0 0 1 40 40");
  offset-distance: 50%;
  animation: move 5s linear forwards;
}

@keyframes move {
  to {
    offset-distance: 90%;
  }
}

The offset-distance property can take a length value or a percentage. If a length value is used, it specifies the distance of the element from the start of the path in terms of pixels or other units. If a percentage is used, it specifies the distance as a percentage of the length of the path.

At offset-distance 0%

At offset-distance 100%

Browser Support

The offset-path is now being supported by all browsers.

That’s all for this tutorial. If you like it, check out our YouTube channel and our Twitter to stay tune for more dev tips and tutorials