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>
Advertisements