path()

The path() CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.

When used in offset-path or d:

path(<string>)

When used in clip-path:

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

<'fill-rule'>

The filling rule for the interior of the path. Possible values are nonzero or evenodd. The default value is nonzero. See fill-rule for more details.

<string>

The string is a data string for defining an SVG path.

The path() function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.

The path() can be used to modify the value of the SVG d attribute, which can also be set to none in your CSS.

The "V" symbol will flip vertically when you hover over it, if d is supported as a CSS property.

CSS

html,body,svg { height:100% }

/* This path is displayed on hover*/
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80")
}

HTML

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

Result

• <shape-outside>
• CSS Shapes
• Overview of CSS Shapes
• SVG Path Syntax Illustrated Guide