Merge Shapes

Combines two or more shapes into a single multi-path Shape, preserving each input's geometry, per-path attributes, and z-order.

Category: Shape Ops Menu path: Shape Ops > Merge Shapes

Ports

Port	Type	Direction	Description
shapes_in	shape	input (multi)	Two or more shape inputs. Use the + button on the node to add more slots.
out	shape	output	Single multi-path Shape containing every input's paths concatenated in slot order.

Parameters

None.

How It Works

MergeShapes is a pure structural combine — there's no boolean math involved. Each input shape contributes its paths verbatim to the output, with vertices re-keyed to fresh PointIds so downstream nodes that rely on stable identity still work.

Z-order matches the slot order: slot 0 paints first, the last slot paints last. Drag inputs in the node graph to reorder.

Per-path attributes (color, strokeColor, strokeWidth, opacity, name) survive untouched — so each input keeps its own DrawShape styling when fed into the grouped renderer. This is the difference between MergeShapes and ShapeBoolean: MergeShapes keeps each piece visually distinct; ShapeBoolean fuses them into one region.

Disconnected slots are skipped. A MergeShapes with only one connected input is a no-op passthrough.

Usage Examples

Combine separately-animated shapes into one layer

Build two Rectangle → Transform2D chains driving independent positions, feed both into MergeShapes, then render with a single DrawShape. You get two rectangles moving independently but rasterized in one pass with shared fill / stroke settings.

Use with VectorSource's Explode Geometry

The "Explode Geometry" action on a VectorSource produces VectorSource → [N ShapeExploders] → MergeShapes → DrawShape. Each piece can be transformed independently (drop a Transform2D between any ShapeExploder and the merge), but they all share one render stack — useful for "animate each letter, render with one consistent look."

Stack multiple SVGs

Wire several VectorSource nodes into one MergeShapes to compose an SVG collage as a single shape. Per-SVG color / strokeColor attributes are preserved on each path.

Tips

• MergeShapes is not the same as ShapeBoolean. MergeShapes concatenates; ShapeBoolean computes geometric union / intersection. Reach for MergeShapes when you want pieces to coexist; reach for ShapeBoolean when you want them to fuse.
• Per-path color attributes survive — useful with DrawShape's grouped renderer, which paints each path with its own color in one draw call.
• The node grows additional input slots on demand via the + button.
• Empty / disconnected slots are silently ignored, so it's safe to leave room for "the third one coming later."

Related Nodes

• ShapeBoolean — when you want geometric fusion (union, intersect, subtract) instead of concatenation.
• ShapeExploder — the inverse direction: pull pieces out of a multi-path shape.
• DrawShape — rasterizes the combined shape; the grouped renderer respects per-path attributes.
• VectorSource — multi-path Shape source; pairs naturally with MergeShapes through the Explode Geometry action.