Skip to content

Region compositing ​

Five operators combine the regions (silhouettes) of two children, named after Figma's boolean operations (see issues #196 / #202). They are the public primitives the cut mark composes from.

Each takes exactly two children [A, B] — the binary SVG-filter implementations do not generalize to three or more, so passing any other number of children throws. The n-ary forms in the table below describe the intended eventual semantics; today only the binary case is implemented.

OperatorRegion algebraNotes
intersectA ∩ BDraw only where both regions overlap.
excludeA ^ B (odd-overlap parity)Draw the symmetric difference.
subtractA − BDraw A with B's region removed.
paintA ∪ (B ∩ A)A is a base surface; B is painted onto it, clipped to A. Sized to A.
maskB ∩ A, A not drawnA is a clip region; B is painted inside it without drawing A. Sized to A.

paint and mask both clip to A but differ in intent: paint keeps A as a visible surface, while mask uses A only as a stencil and never draws it.

Union (A ∪ B) is intentionally not exported — it is conceptually layer (#196). Use layer to overlay regions.

js
gf.paint([
  gf.rect({ x: 0, y: 0, w: 120, h: 120, fill: gf.color.blue[3] }),
  gf.rect({ x: 40, y: 40, w: 120, h: 120, fill: gf.color.red[3] }),
]).render(root, { w: 160, h: 160 });

Here A is the blue square (the surface) and B is the red square; B is only drawn where it overlaps A, so the result is clipped to the blue square's bounds.

Signatures ​

ts
intersect(options?, [A, B]);
exclude(options?, [A, B]);
subtract(options?, [A, B]);
paint(options?, [A, B]);
mask([A, B]);

Each child may be a mark or an already-built node, such as a ref(...). Marks are resolved against the incoming data.

Parameters ​

intersect ​

Draw only where both regions overlap: A ∩ B. Binary only.

OptionTypeDefaultDescription
blendMode"color" | "multiply" | "screen" | "overlay" | "luminosity""color"Blend used where the two regions combine.

exclude ​

Symmetric difference (odd-overlap parity): A ^ B. Binary only.

OptionTypeDefaultDescription
blendMode"color" | "multiply" | "screen" | "overlay" | "luminosity""color"Blend used where the two regions combine.

subtract ​

Draw A with B removed: A − B. Binary only.

OptionTypeDefaultDescription
blendMode"color" | "multiply" | "screen" | "overlay" | "luminosity""color"Blend used where the two regions combine.

paint ​

A is a base surface B is painted onto, clipped to A: A ∪ (B ∩ A). Result sized to A. Binary only.

OptionTypeDefaultDescription
blendMode"color" | "multiply" | "screen" | "overlay" | "luminosity""color"Blend used where the two regions combine.

mask ​

Use A's region as a clip and paint B inside it without drawing A itself: B ∩ A, reporting A's bounds. Binary only. No options.

No options.

Arity ​

All five operators require exactly two children and throw "Porter-Duff relation operators currently expect exactly two children" otherwise. The n-ary forms (A ∩ B ∩ ..., A − B − C − ..., etc.) are not yet implemented.