path() | CSS-Tricks

The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.
There are three major uses for the path() function. You can use it with the clip-path property, the offset-path property, and to set the d property for a SVG path element (like other SVG presentation attributes, the d attribute can be set in CSS, though this particular use of path() isn’t supported in Safari).
Of these three, only using the d property directly draws a shape on screen. clip-path does not draw a shape directly, but cuts a shape out of another element. offset-path creates a shape that you can animate another element along.
We’ll start with the SVG d property, creating a speech bubble:
Next, we’ll cut that speech bubble out of another element using clip-path:
We can also use the path() function on an offset-path to create an animation. Let’s animate the speech bubble along its own path:
Note: We’ll use the clip-path property in examples because it has wider browser support than the d attribute and is much easier to visualize how the path() function works than with offset-path since that’s for motion. However, the path() function works the same with all three CSS properties.
The path() function accepts two parameters: the fill rule and a path string.
The first keyword in the path() function (which was omitted from the above examples because it’s optional) is the “fill” rule. This tells the browser how to fill the shape with color. There are two options: nonzero and evenodd (the same as in SVG). In most shapes, they work the same, however, when a shape overlaps itself or has overlapping shapes, the algorithms differ on what they fill with color and what they don’t.
The algorithm descriptions below are included for completeness. You don’t need to understand how the algorithms work to use path(). Most of the time you can use the default value (nonzero) and it will work the way you’d expect. If it ever isn’t working the way you want, try switching to evenodd. And if that doesn’t work, then the fill rule isn’t the issue.
If a fill rule is used it should be followed by a comma (,).
The path string is borrowed from the path element in SVG and can feel like a string of meaningless letters and numbers, but we’ll demystify them below (or at least help you see it’s worth bookmarking this page on the off-chance you really need to hand-edit a path string). If you need a more human-readable solution, make sure you look into the shape() function.
In the next section, we will discuss specific path commands for drawing lines, arcs, and curves. That syntax will use a particular path command in either an uppercase letter or a lowercase letter, plus the coordinates associated with that path command.
The difference between M and m is that coordinates following a capital letter command are absolute coordinates (i.e., move to this coordinate) versus a lowercase letter being followed by relative coordinates (i.e, move by this amount).
All path commands take the previous command’s endpoint as the starting point. The first command uses the upper-left corner of the element as the starting point.
For the sake of simplicity, I will only use lowercase letters in the path commands below, but capital letters are equally usable in all of the commands. Also, while I will often use the word “draw” to describe how a path command works, it’s important to remember that these commands do not show anything on the screen when using clip-path, but rather are defining the shape of the cookie cutter that will be cutting out the shape from an element.
Generally, when a comma separates values they are the X and Y coordinates of a point. Spaces separate multiple points from each other and from other kinds of values such as angles or flags.
The move command is like picking up the pen while drawing and moving to a new location allowing for multiple, unconnected shapes to be created using a single path() function.
The line command draws a line from the starting point to the provided coordinates.
The horizontal line command draws a horizontal line from the starting point to the provided X coordinate.
The vertical line command draws a vertical line from the starting point to the provided Y coordinate.
The Cubic Bézier Curve command draws a Bézier curve from the starting point to the provided coordinates. The curvature is defined by the control points. The first point below is the control point for the starting point (20,-20), the second point is the control point for the end point (50,-20) and the third point is the end point of the curve (100,40).
The Quadratic Curve command is similar to the Cubic Bézier Curve command but uses the same control point (10,-40) for both the starting point and ending point (100,-20) of the curve.
The Smooth Cubic Bézier Curve command draws a Bézier curve from the starting point to the provided coordinates, but uses mirrored control points to try to make smooth transitions from one curve to the next. The smooth command mirrors the control point from the previous path command as the control point for the curve’s starting point. Then it takes a control point for the end point (50,-40) and the end point itself (100,20).
The Smooth Quadratic Bézier Curve command draws a quadratic Bézier curve using the mirrored control point from the starting point as the control point for both the starting point and the end point. Thus, it only takes the end point (100,-20).
The Elliptical Arc Curve command draws a portion of an ellipse between the starting point and the ending point. It takes seven values. All of the values — except the last two — are space-separated (since the last two are the end coordinates, they are comma separated).
The first value is the X radius of the ellipse followed by the Y radius of the ellipse. Then we have an angle relative to the X axis for how much the ellipse should be rotated through the points.
Having set this information, there are still four possible arcs that th