The Cutout Problem, and Why CSS Masks Beat Clip-Path
Carving a hole in a shape is a surprisingly awkward thing to do on the web. A “cutout” effect—one shape with a smaller shape removed from it—sounds like a job for CSS clip-path and its circle() syntax. But that function doesn’t carve out; it defines the region that stays visible. You’d need the inverse of that circle, tracing around the whole shape and then into the circle and back out, like a bite from a cookie.
That inverse tracing is clip-path: path() territory. The syntax exists, but it comes with a sizeable limitation: it only works in fixed pixel units, which makes it a poor fit for fluid layouts. The alternative is clip-path: url("#my-path"), pointing at an SVG path defined inline. That works, but it’s where the complexity begins to pile up.
Exploring the options further, a more promising approach emerges from mask-image. A clever implementation uses CSS masks to achieve the cutout effect without needing to compute the inverse path of the shape. The real winner, however, turns out to be a combination of SVG’s <mask> and <image> elements.
The Inverse Problem: SVG Masks vs. Clip-Path
The core issue is that clip-path defines a visible region. If you want a button to show everything except a small chunk, you must define a path or polygon that is the exact inverse of the original boundary. As Jay Freestone notes, this quickly becomes unwieldy:
clip-pathdefines a visible region, meaning that if you want all but a tiny chunk of the button to be visible, you need to define apathorpolygonwhich is the inverse of the original.
For simple cases, polygon() has an edge over circle() because it supports percentage units, giving some layout flexibility. There are even ideas mixing fixed and fluid units within a single polygon for a hybrid effect. But that flexibility has its limits once the cutout isn’t a straight-edged polygon.
Why SVG Masks Are the Practical Choice
Weighing the options, the strengths of SVG-based approaches become clear. Rather than mathematically engineering the inverse of a shape as a clip-path—a process that gets hairy the moment the shape isn’t a triangle or simple polygon—you can rely on the compositing capabilities of SVG masks. The workflow is also more natural for designers: export an SVG asset and drop it in, rather than hand-coding an inverse path. This is why SVG masks end up being the more flexible and maintainable solution for cutout effects in modern front-end work.
