CSS - offset-path Property

An element's path inside its parent container or SVG coordinate system is specified by the offset-path CSS property.

The path, which determines the element's position or movements along it, might be a line, curve, or other shape.
The offset-path property is used to control an element's position and orientation along a given path, along with offset-distance, offset-rotate, and offset-anchor.

The offset-path property defines a path an animated element can follow, either a specified path with sub-paths or a basic shape.

It determines the element's exact position, with initial position and direction. Previously called motion-path, it now describes static positions.

Possible Values

The offset-path property may accept values like offset-path, <coord-box>, or both; it can also accept the keyword none. A <url>, a <basic-shape>, or a ray() function might be the value of the offset-path.

none - The none value indicates an element without any offset-path, based on its default position properties like top and left, rather than an offset-path.
<offset-path>- It is possible to specify the offset-path property using a ray() function, a <url> value, or a <basic-shape> value.

ray() - The ray() function creates a line with a fixed starting position, length, and angle.
url() - An SVG shape element can be referenced by the offset-path protperty using its ID in a url() function.
<basic-shape> - Use CSS basic shape functions such as circle(), ellipse(), inset(), path(), polygon(), rect(), or xywh() to set the offset-path property.

<coord-box> - An optional parameter named <coord-box> is part of the offset-path property. The reference box size, typically a view-box in SVG or border-box in CSS, is determined by the offset path, which is defined by <coord-box>.

Applies to

Transformable elements

Syntax

 offset-path = none | <offset-path> || <coord-box>

CSS offset-path - Using url()

The following example demonstrates the creating an offset-path using url().

 <html> <head> <style> body { background: #edbb5f; padding: 90px; display: flex; justify-content: center; } .track { stroke: #f0e9e9; fill: none; stroke-width: 0.15; } .marker { motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; fill: #f23c35; } @keyframes move { 100% { motion-offset: 80%; offset-distance: 80%; } } </style> </head> <body> <svg viewBox="0,0 10,10" width="300px" height="300px"> <path class="track" d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"/> <circle class="marker" r="1"></circle> </svg> </body> </html>

CSS offset-path - Using path()

The following example demonstrates the creating a offset-path using path().

 <html> <head> <style> body { background: #cfc7c6; padding: 20px; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .demoOffset { width: 300px; height: 300px; position: relative; } .track { fill: none; stroke: #1f1e1e; stroke-width: 2; } .object-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: url(#clip); } .object { width: 50px; height: 35px; background-color: #4CAF50; position: absolute; offset-path: path("M 10,10 L 290,10 L 290,290 L 10,290 Z"); offset-distance: 100%; offset-rotate: auto; animation: move 4s linear infinite; } .object:nth-child(2) { background-color: #FFC107; animation-delay: -0.3s; } .object:nth-child(3) { background-color: #2196F3; animation-delay: -1s; } .object:nth-child(4) { background-color: #f2514b; animation-delay: -1.3s; } @keyframes move { 100% { offset-distance: 0%; } } </style> </head> <body> <div class="demoOffset"> <svg viewBox="0 0 300 300" width="300" height="300" class="track"> <defs> <clipPath id="clip"> <path d="M 10,10 L 290,10 L 290,290 L 10,290 Z" /> </clipPath> </defs> <path d="M 10,10 L 290,10 L 290,290 L 10,290 Z" /> </svg> <div class="object-container"> <div class="object"></div> <div class="object"></div> <div class="object"></div> <div class="object"></div> </div> </div> </body> </html>

Print Page