CSS path() Function

The path() function allows you to define a custom shape using an SVG path data string.

While CSS provides basic shape functions like circle(), ellipse(), and polygon(), they can be limiting when you need to create complex shapes with curves. The path() function bridges this gap by bringing the full drawing power of SVG directly into your CSS.

You can use the path() function with several CSS properties, most notably clip-path (to cut out a shape from an element), offset-path (to animate an element along a specific route), and shape-outside (to wrap text around a custom shape).

Here is an example of using the path() function with the clip-path property to crop a square div into a custom curved shape:

View Output Full Screen Preview

Animating Along a Path

One of the most exciting uses for the path() function is combining it with the offset-path property. This allows you to define a custom trajectory for an element to follow during an animation.

By animating the offset-distance property from 0% to 100%, the element will travel along the exact coordinates defined in your SVG path string. The browser will even automatically rotate the element so that it faces the direction of the path as it moves.

Here is an example of an element animating along a wavy path:

.moving-element {
    width: 40px;
    height: 20px;
    background-color: #007bff;
    border-radius: 10px 40px 40px 10px; /* Shaped like a little rocket/car */
    position: absolute;
    top: 0;
    left: 0;
    
    /* Define the path the element will travel along */
    offset-path: path("M 20 100 C 80 10 120 190 200 100 C 280 10 320 190 380 100");
    
    /* Animate the distance traveled */
    animation: moveAlongPath 4s linear infinite alternate;
  }

@keyframes moveAlongPath {
    0% {
      offset-distance: 0%;
    }
    100% {
      offset-distance: 100%;
    }
  }
  
  /* Optional: Draw the path using an SVG background so we can see the track */
  .track-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><path d="M 20 100 C 80 10 120 190 200 100 C 280 10 320 190 380 100" fill="none" stroke="%23ccc" stroke-width="2" stroke-dasharray="5,5"/></svg>');
    pointer-events: none;
  }
</style>

View Output Full Screen Preview

Fill Rules

When drawing complex paths that intersect themselves, the browser needs to know how to determine what is "inside" the shape and what is "outside". The path() function accepts an optional fill rule parameter to control this.

nonzero: This is the default rule. It determines the "insideness" of a point by drawing a ray from that point to infinity and counting the path segments it crosses, factoring in the direction the path was drawn.
evenodd: This rule determines the "insideness" of a point by drawing a ray from that point to infinity and simply counting the number of path segments it crosses. If the number is odd, the point is inside; if even, it is outside.

Official Syntax

The official syntax of the path() function is as follows:

Where <fill-rule> is defined as:

Possible Values

As indicated in the official syntax, the path() function accepts the following values:

fill-rule: An optional keyword (nonzero or evenodd) that specifies how to determine the inside of the shape. If omitted, it defaults to nonzero.
string: A string containing valid SVG path data (e.g., "M 10 10 L 90 10 L 90 90 Z"). The string must be enclosed in quotes.

CSS Specifications

The path() function is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.