CSS offset-path Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS offset-path property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path can be a line, a curve, a geometrical shape, or a combination of these. The offset-path property is used in combination with the offset-distance, offset-rotate, and offset-anchor properties to control the position and orientation of the element along the path. The offset-distance property specifies how far along the path the element is positioned, the offset-rotate property specifies the rotation of the element, and the offset-anchor property specifies which point on the element is aligned with the path. The offset-path property can be used to create a variety of effects, such as animating an element along a path, positioning an element along a curved edge, or creating a complex layout.

Initial value: none
Applies to: transformable elements
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.offsetPath

Interactive Demo

offset-path: path('M-70,-40 C-70,70 70,70 70,-40');

offset-path: path('M0,0 L60,70 L-60,30z');

Syntax

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

Values

noneSpecifies that the element does not follow any offset path. The none value is equivalent to the element not having any offset transform.
path()Specify a path in SVG syntax.
ray()Specify a path with the CSS ray() function.
url()Specify a path by using the URL to an SVG file.
<basic-shape>Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon().

Example

HTML

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

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

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

CSS

body {
  width: 300px;
  height: 200px;
  border-radius: 50px;
  border: dashed aqua;
  border-width: 25px;
  padding: 25px;
  margin: 50px;
}

.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Result

Editor