clipPath vs mask: The Key Difference
Both hide and reveal SVG content — but through different mechanisms. <clipPath> uses geometry: everything inside the clip shape is shown, everything outside is hidden. Binary — fully visible or fully hidden. <mask> uses luminance or alpha channel values: white areas reveal, black areas hide, greys create partial transparency. Masks support soft edges and gradual transitions; clip paths do not.
Creating Shaped Pattern Reveals
Clip a repeating SVG pattern to any arbitrary shape using clip-path. Define the clip shape (circle, polygon, or path) in a <clipPath> element, then apply it to a rectangle filled with your pattern: <rect fill="url(#pattern)" clip-path="url(#myClip)"/>. This creates a pattern that only appears inside the clip shape — powerful for text fill, icon fill, and geometric compositions.
<defs>
<clipPath id="hexClip">
<polygon points="60,0 120,34 120,103 60,138 0,103 0,34"/>
</clipPath>
<pattern id="dots" ...>...</pattern>
</defs>
<rect width="120" height="138"
fill="url(#dots)"
clip-path="url(#hexClip)"/>Text-Clipped Patterns
One of the most striking techniques: fill text with an SVG pattern. Use <text> inside a <clipPath>, then apply that clip to a pattern-filled rectangle. The pattern appears only inside the letter forms. Alternatively in CSS: background-clip: text; -webkit-background-clip: text; color: transparent — simpler and more maintainable.
Gradient Masks for Pattern Fades
Create a pattern that fades to transparent at the edges using a mask with a gradient. Define a <mask> containing a radial or linear gradient from white (centre) to black (edges). Apply it to your pattern element. The result: the pattern is fully visible in the centre and smoothly fades to transparent at the edges — perfect for hero section patterns.
Animated Masks
Animate mask coordinates using CSS or SMIL to create reveal effects. A pattern hidden behind a mask that animates its x-position creates a "wipe" reveal. A radial gradient mask whose radius animates from 0 to 100% creates a circular reveal. These effects work with CSS custom properties and JavaScript to create scroll-triggered or interaction-triggered reveals.
clipPathUnits & maskContentUnits
Like patterns, clip paths and masks use a *Units attribute to control the coordinate system. userSpaceOnUse uses absolute SVG coordinates. objectBoundingBox uses fractions relative to the clipped element (0–1). For responsive clip paths that adapt to any element size, use objectBoundingBox.
CSS clip-path: The Simpler Alternative
For clipping background patterns to shapes, CSS clip-path on the DOM element is often simpler than SVG clipPath. CSS clip-path supports circles, ellipses, polygons, and SVG path references. The advantage: it clips the entire element including its background — no SVG required. The drawback: less precision and no luminance masking.