dom-cutout

Cut the silhouette of one DOM element out of another — because a background-colored border is a promise your gradient will break.

Zero dependencies Plain DOM. Works with any framework or none.

Contour-following SVG overlays are traced glyph-for-glyph, stroke widths compensated.

Crisp everywhere Chosen by elimination against WebKit's rendering quirks — the full story.

Installation

One dependency-free package. The React adapter ships in the same tarball, behind its own entry point.

npm install dom-cutout

pnpm add dom-cutout

yarn add dom-cutout

Every demo on this page, walked through as code you can paste — pick the one that matches your stack.

Vanilla DOM createCutout() with elements you own — attach, live options, teardown. No framework. React Step-by-step usage of <Cutout> and the headless useCutout hook — every demo above, as copy-paste code