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