path() CSS Function

Description

The CSS path() function allows you to define a custom path for an element to follow. It takes an SVG path string as its argument, and can be used in the following CSS properties:

• offset-path: Defines a path for an element to follow when it is animated.
• clip-path: Defines a path that is used to clip an element's content.

The path() function can be used to create a wide variety of shapes, including circles, ellipses, rectangles, polygons, and even more complex shapes. It is a powerful tool that can be used to add visual interest and interactivity to your web pages.

Here is an example of how to use the path() function to create a circle:

.circle {
  width: 100px;
  height: 100px;
  clip-path: path(circle(50px, 50px, 50px));
}

This CSS will create a square element with a width and height of 100px. The clip-path property will then clip the element's content to the shape of a circle with a radius of 50px.

The path() function can also be used to create more complex shapes, such as the following:

.wave {
  width: 100%;
  height: 100px;
  clip-path: path(M0 0 L50 50 L100 0 Z);
}

This CSS will create a wave-shaped element. The M0 0 command moves the cursor to the point (0, 0). The L50 50 command draws a line from the current cursor position to the point (50, 50). The L100 0 command draws a line from the current cursor position to the point (100, 0). The Z command closes the path.

Syntax

path([<'fill-rule'>,]?<string>)

Values

• <'fill-rule'>The filling rule for the interior of the path. Possible values are nonzero or evenodd. The default value is nonzero.
• <string>The string is a data string for defining an SVG path.

Example

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />

</svg>

html,

body,

svg {

  height: 100%;

}



/* This path is displayed on hover*/

#svg_css_ex1:hover path {

  d: path("M20,80 L50,20 L80,80");

}

Browser Support

The following table will show you the current browser support for the CSS path() function.

Desktop
88	88	97	74	x

Tablets / Mobile
88	97	63	x	15	88

Last updated by CSSPortal on: 7th October 2023