CSS offset-path

The CSS offset-path property allows you to define a path along which an element will be offset from its normal position. This property is used in combination with the offset-distance and offset-rotate properties to create complex motion paths for elements.

Let's see how the offset-path property works with some examples. In the examples below, we will use fictional data to demonstrate the usage of this property.

Result:


    .element {
      offset-path: path('M10,10 Q100,10 100,100 T200,100');
      offset-distance: 50px;
      offset-rotate: auto;
    }

This code will make the element follow a quadratic Bézier curve path with the specified control points and end points, while maintaining a distance of 50 pixels from the path and auto-rotating along the path.

In the above example, the offset-path property is used to define a path using the path() function with the specified coordinates. The offset-distance property defines the distance between the element and the path, while the offset-rotate property determines how the element should rotate along the path.

It's important to note that the path specified in the offset-path property can be a predefined shape, such as a circle or ellipse, or a custom path created using SVG path data.

Experiment with different path shapes, distances, and rotations to create interesting motion effects on your elements using the offset-path property.