CSS Function - path()
The CSS function path() accepts an SVG path string and is used in CSS Shapes and CSS Motion Path to define the outline of a shape.
Possible values
<'fill-rule'> - This property determines the rule with which the inside of the path is filled, with options such as nonzero or evenodd. The default value is nonzero.
<string> - The string is used as data to define the shape of an SVG path.
Syntax
When used in offset-path or d:
path(<string>)
When used in clip-path:
path([<'fill-rule'>,]?<string>)
CSS path() - Basic Example
In the following example, the path() function is used as the value of the offset-path property to define a specific path for the red square to follow.
<html> <head> <style> #shape { width: 100px; height: 100px; background-color: red; offset-path: path("M10 80 Q 77.5 10, 145 80 T 280 80"); offset-distance: 0%; animation: move 5s infinite linear; } @keyframes move { from { offset-distance: 10%; } to { offset-distance: 100%; } } </style> </head> <body> <div id="shape"></div> </body> </html>
CSS path() - Using svg
In the following example, the path() function is a CSS function that is used to define complex shapes within the d attribute of an SVG element.
The d attribute stands for the path data and determines the shape of the element.
Through the animation, the path() function changes the d attribute, causing the shape of the d element to change and create a visual effect.
<html> <head> <style> svg { width: 300px; height: 200px; background-color: lightgray; } path { fill: blue; animation: modifyPath 2s infinite alternate; } @keyframes modifyPath { 0% { d: path("M50 50 L150 50 L100 150 Z"); } 100% { d: path("M50 50 L150 50 L100 100 Z"); } } </style> </head> <body> <svg> <path></path> </svg> </body> </html>
To Continue Learning Please Login
Login with Google