CSS offset-path Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 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.

💡 Syntax

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

Syntax

Copied

element {
  offset-path: value;
}

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

🎛️ Default Value

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

🏠 Property Values

Value	Description
none	The element does not follow any path.
path()	Defines a path using SVG path data. For example, path('M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80').
circle()	Defines a circular path. For example, circle(50% at 50% 50%).
ellipse()	Defines an elliptical path. For example, ellipse(50% 25% at 50% 50%).
polygon()	Defines a polygonal path. For example, polygon(50% 0%, 100% 100%, 0% 100%).
url()	References an external resource, such as an SVG file, that defines the path.

📄 Example

In this example, we'll animate a box along a circular path.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS offset-path Example</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      offset-path: circle(100px at 150px 150px);
      animation: move 5s infinite linear;
    }

    @keyframes move {
      0% {
        offset-distance: 0%;
      }
      100% {
        offset-distance: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>Box Moving Along a Circular Path</h1>
  <div class="box"></div>
</body>
</html>

In this example, a red box moves along a circular path with a radius of 100px centered at (150px, 150px).

🖥️ Browser Compatibility

The offset-path property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always recommended to test your animations across different browsers to ensure consistent behavior.

🎉 Conclusion

The offset-path property provides a powerful way to animate elements along predefined paths.

By leveraging various path definitions, such as circles, ellipses, and SVG paths, you can create dynamic and engaging animations. Experiment with different paths and combine offset-path with other properties like offset-distance and offset-rotate to achieve the desired motion effects for your web projects.