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>