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.

Syntax

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

Parameters

<'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 an SVG path data string.

Examples

Examples of correct values for path()

path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

Use as the value of offset-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.

Specifications

See also

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