Understanding the CSS clip-rule Property

What is clip-rule?

The clip-rule CSS property determines, when parts of a path overlap other parts, which pixels in a mask's box are inside the clipping shape defined by a clip path and which are outside. This property is essential for creating clean, precise visual effects in SVG-based web graphics.

Unlike the general CSS clip-path property which works on any HTML element, clip-rule only applies to SVG elements contained within a <clipPath> element. This makes it an SVG-specific property for fine-tuning clipping behavior in complex vector graphics.

Why clip-rule Matters for Modern Web Design

Modern web development increasingly relies on SVG for crisp, scalable graphics. Whether you're creating custom icons, animated illustrations, or sophisticated UI components, understanding clip-rule gives you precise control over how overlapping paths are rendered. The property becomes critical when working with star shapes, multi-pointed polygons, or any graphic where path segments cross each other.

Our team regularly uses clip-rule when building custom web development solutions that require sophisticated visual effects and precise graphical control.

Key Takeaways:

• Only works with SVG <clipPath> elements
• Controls how overlapping paths are interpreted for clipping
• Two values: nonzero (default) and evenodd
• Essential for creating clean star shapes and cutout effects
• Supported in all major browsers since January 2020

The Two Values: nonzero and evenodd

The clip-rule property accepts two keyword values that determine the fill algorithm used to determine inside/outside regions of a clipping path, as documented in the MDN clip-rule reference.

nonzero (Default)

For every point in the clipping mask's box, an imaginary ray is drawn in a random direction. Every time the ray intersects with any part of the clipping path, a tally is increased by one if the clipping path's segment is moving from left to right across the ray, whereas it is decreased by one if the path segment is moving right to left across the ray.

• If the final total is zero, the point is outside
• If the total is non-zero, the point is inside
• The algorithm considers path direction in its calculations
• Produces predictable results when paths have consistent winding

evenodd

For every point in the clipping mask's box, an imaginary ray is drawn in a random direction. Every time the ray intersects with any part of the clipping path, a tally is simply increased by one.

• If the final tally is even, the point is outside
• If the tally is odd, the point is inside
• Does not consider path direction
• Zero is treated as even (outside)
• Ideal for creating cutout effects and overlapping regions

Visual Comparison

Consider a five-pointed star: when using nonzero, the fill depends on whether the star's points were drawn clockwise or counter-clockwise. With evenodd, each time the ray crosses a line, the count increments--regardless of direction--making it simpler to predict the result for complex overlapping shapes.

For developers working with advanced CSS techniques, understanding clip-rule is just one part of mastering modern SVG graphics in web applications.

Practical Examples

Creating Star Shapes

The most common use case for clip-rule is creating star shapes where the points of the star overlap. Without proper clip-rule usage, the center pentagon of a star might not render correctly or could appear as a hole instead of filled area.

When you draw a star using SVG path data, the lines at the center cross each other. The clip-rule determines whether that central overlapped region is considered "inside" or "outside" the shape.

Using clip-rule: evenodd ensures the center of the star is properly rendered as part of the visible shape. The evenodd algorithm counts ray intersections--since the star's center is crossed by multiple lines, the count is odd, marking it as inside the shape.

Combining with CSS clip-path

You can also define the clipPath in a hidden SVG and reference it from your CSS for cleaner markup separation:

SVG clipPath Integration

To use clip-rule effectively in your web projects, define your clipping path in SVG and reference it from CSS. This approach provides maximum flexibility and keeps your styling separate from structure.

Inline SVG with clipPath

The most direct approach embeds both the clipPath definition and the element being clipped within the same SVG. This works well for self-contained graphics and icons.

CSS clip-path with External References

For better separation of concerns, define your clipPath in a hidden SVG and apply it via CSS. This technique is particularly useful when applying the same clipping effect to multiple elements or when working with modern CSS data fetching techniques.

Best Practices

1. Use evenodd for Cutout Effects

When you want overlapping regions to appear as holes (transparent), evenodd is the natural choice. This is ideal for creating ring shapes, star cutouts, or any effect where crossed lines should create openings.

2. Consider Path Direction for nonzero

The nonzero rule produces different results based on path winding direction. If you're drawing paths programmatically or using vector tools, maintaining consistent winding (all clockwise or all counter-clockwise) gives predictable results with nonzero.

3. Test Across Target Browsers

While browser support is excellent, always verify your clipping appears correctly in Chrome, Firefox, Safari, and Edge. The visual difference between nonzero and evenodd can be subtle but impactful.

4. Combine with CSS clip-path for Flexibility

Reference SVG clipPaths in CSS for maximum maintainability. This approach keeps your clip rule definitions centralized and makes it easier to apply the same clipping to multiple elements.

5. Be Mindful of Performance

Clip-path operations create a new stacking context, similar to opacity values other than 1, as explained in the MDN CSS Clipping Guide. For optimal performance:

• Avoid animating clip-path on every frame for large elements
• Use CSS will-change sparingly and only when necessary
• Consider using simpler shapes (circle, ellipse) over complex polygons when possible
• Pre-render clipped elements when possible rather than applying clip-path dynamically

Sources

1. MDN Web Docs - clip-rule - Official documentation with syntax, values, and live examples
2. MDN Web Docs - CSS Clipping Guide - Comprehensive guide to CSS clipping fundamentals
3. MDN Web Docs - clip-path - Reference for the parent CSS clipping property