Learn Clipper.js

Clipper.js is a nifty Javascript library for manipulating SVG paths with boolean operations. That essentially means that you can combine and clip SVG paths using a subject and a clip.

This page is an interactive version of the demo application from the clipper.js documentation.

You can use this page to experiment with the subject and clip paths directly and see the resulting clipper.js output.

Note: Your subject path and clipping path should match in dimensions (width and height). The output will match the dimensions of the subject SVG.

If you'd like to export any of the output SVG, right click on the corresponding output, click inspect, and copy the SVG from the source


Built by @scientiffic at Recurse using clipper.js and text-to-svg.

Subject Path

The object you want to keep

Clipping Path

The mask you want to use on your subject path

Clipper.js Output

Union
Difference
Xor
Intersection