Combine geometric shapes with boolean operations: union, subtract, intersect, and exclude.
Shape Combiner builds one new shape out of two overlapping geometric shapes - circles, rectangles, polygons - using the boolean operations union, subtract, intersect, and exclude, the same idea as the Pathfinder panel in drawing programs. Each operation is settled by a single membership question: which points belong to the first shape, the second, or both. The result is one new outline instead of two overlapping layers. The thing people most often get wrong is subtract, which is directional: first shape minus second shape is not the same as second minus first, so check which shape is the base before running it.
A concrete input and expected output from the current implementation.
Input
Square 100x100 with its bottom-left corner at (0,0), and square 100x100 with its bottom-left corner at (50,50). Compute all four operations: union, subtract (first minus second), intersect, exclude.
Expected output
Union: one octagon, area 17,500. Subtract: one L-shaped hexagon, area 7,500 - the 50x50 top-right corner of the first square is gone. Intersect: a 50x50 square, area 2,500. Exclude: two separate L-shaped pieces, area 7,500 each, 15,000 total.
The squares overlap in exactly the 50x50 region between x=50 and x=100 and y=50 and y=100, area 2,500. Union is both areas minus the overlap (20,000 - 2,500), subtract keeps the first square minus the overlap (10,000 - 2,500), intersect is the overlap itself, and exclude is everything except the overlap (17,500 - 2,500).
The two input shapes agree on most of the plane and disagree only inside their overlap. Each operation is that membership question resolved differently: union keeps points in either shape, intersect keeps points in both, subtract keeps points in the first but not the second, and exclude keeps points in exactly one. The overlap is the hinge - compute it once and all four results follow.
Subtract is not commutative: the first shape is the base and the overlap is carved out of it, so swapping the two inputs changes the result. If one part of the result sits inside another (a hole cut by subtract), how it renders depends on the fill rule: even-odd treats nested outlines as holes automatically, while nonzero requires the inner outline to wind in the opposite direction. Exclude can also split into several pieces, since the result need not be connected.
For the same two shapes, subtract keeps the first shape and removes the overlap from it, leaving one notched or holed shape. Exclude removes the overlap from the picture entirely, leaving the non-overlapping parts of both shapes as two separate pieces. In short: subtract keeps one shape minus the overlap; exclude keeps both shapes minus the overlap.
Each operation is defined between two shapes, so combining three or more means applying the operation repeatedly, and the order you choose changes the outcome: (A minus B) minus C is not the same as A minus (B minus C). Decide the hierarchy first - which shape is the base and which are the cutters - and apply the operations in that sequence.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.