CSS offset-path Property

What You’ll Learn

The offset-path property defines the route an element follows during a motion path animation. It is the foundation for circle orbits, SVG curves, and custom shape-based movement.

Introduction

The offset-path property in CSS is used to define the path along which an element moves during an animation.

This path can be a basic shape, such as a circle or rectangle, or a more complex path defined using SVG path data.

The offset-path property is often used in conjunction with other properties like offset-distance and offset-rotate to create sophisticated motion effects.

Definition and Usage

Think of offset-path as drawing the track. Once the track exists, you can move an element along it by changing offset-distance.

Beginners usually start with circle() because it creates smooth orbital motion with very little code.

📝 Syntax

The syntax for the offset-path property is as follows:

element {
  offset-path: value;
}

The value can be a basic shape, an SVG path, or the keyword none.

Basic Example

.box {
  offset-path: circle(100px at 150px 150px);
  animation: move 5s linear infinite;
}

Syntax Rules

• Use none to remove a motion path.
• Use shape functions such as circle(), ellipse(), and polygon().
• Use path() for custom SVG-style routes.
• Combine with offset-distance to move along the defined route.

🎯 Default Value

The default value of the offset-path property is none, meaning that no path is defined for the element to follow.

Without a path, related motion properties such as offset-distance have no visible effect.

💎 Property Values

Examples Gallery

Define different path types, then animate movement with offset-distance.

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: red;
    offset-path: circle(100px at 150px 150px);
    animation: move 5s infinite linear;
  }

  @keyframes move {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
  }
</style>

<div class="box"></div>

.dot {
  offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
  animation: follow 4s ease-in-out infinite alternate;
}

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

.orb {
  offset-path: ellipse(120px 60px at 160px 90px);
  animation: orbit 5s linear infinite;
}

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

.marker {
  offset-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: trace 6s linear infinite;
}

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

Pair with offset-distance and offset-rotate

offset-path only defines the route. Use offset-distance to move along it and offset-rotate when the element should turn with the path direction.

.badge {
  offset-path: circle(80px at 120px 80px);
  offset-distance: 0%;
  offset-rotate: auto;
  animation: orbit 4s linear infinite;
}

♿ Accessibility

• Respect reduced motion — Disable path animations inside prefers-reduced-motion: reduce.
• Keep motion decorative — Do not rely on path movement to communicate essential information.
• Avoid distracting loops — Continuous motion can make nearby content harder to read.
• Provide static fallbacks — Ensure the layout remains usable if motion paths are unsupported.

💡 Best Practices