How do I intersect SVG paths online?

Click Intersect paths. The second path becomes a clipPath; the first path is clipped to that overlap.

Why clipPath instead of a new Bézier?

Clip shows the intersection immediately without a full boolean kernel. For a baked outline, export and trace later.

Fix clipping enlarges a bad clip. Intersect creates a clip on purpose to keep overlap.

Yes. Delete the clip-path attribute in Source, or Fix Clipping to widen it.

FAQ

Quick answers

How do I intersect SVG paths online?: Click Intersect paths. The second path becomes a clipPath; the first path is clipped to that overlap.
Why clipPath instead of a new Bézier?: Clip shows the intersection immediately without a full boolean kernel. For a baked outline, export and trace later.
How is intersect different from fix clipping?: Fix clipping enlarges a bad clip. Intersect creates a clip on purpose to keep overlap.
Can I remove the clip after inspecting overlap?: Yes. Delete the clip-path attribute in Source, or Fix Clipping to widen it.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B