path() CSS Function

The path() CSS function allows you to define a custom motion path for elements to follow, typically used with the offset-path property. Instead of relying on standard geometric shapes like circles or polygons, path() lets you specify a vector path directly using a series of commands similar to those in SVG path data. This provides precise control over the trajectory of an element during animations or transitions.

Each path is defined using a combination of commands such as M for “move to”, L for “line to”, C for “cubic Bézier curve”, Q for “quadratic Bézier curve”, and Z for closing the path. These commands allow complex motion patterns that can loop, curve, or zigzag, offering more creative possibilities than simpler path functions like circle() or ellipse().

A practical example of using path() is animating a div along a custom trajectory:

.my-element {
  offset-path: path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
  offset-rotate: auto;
  animation: moveAlongPath 5s infinite;
}

@keyframes moveAlongPath {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

In this example, the offset-rotate property ensures the element rotates along the curve naturally. Using path() is particularly useful for complex animations like moving objects along intricate tracks, following curves in a graph, or animating decorative elements in a web page.

The function also supports relative and absolute coordinates, giving flexibility in scaling paths according to the element’s container. While path() can be combined with properties like offset-distance, it cannot be directly used for layout; it is strictly for animation and motion paths.