Shapes Reference

Every shape type with its properties, gizmos, and auto collider.

Try it

title: "All five shape types"
description: "Rectangle, ellipse, star, polygon, and vector path"
nodes:
  - type: RECT, name: "Rect", x: 60, y: 200, w: 70, h: 50, fill: "#3498DB", cornerRadius: 8
  - type: ELLIPSE, name: "Ellipse", x: 160, y: 200, w: 70, h: 50, fill: "#E74C3C"
  - type: STAR, name: "Star", x: 250, y: 200, w: 60, h: 60, fill: "#F39C12", points: 5
  - type: POLYGON, name: "Polygon", x: 330, y: 200, w: 60, h: 60, fill: "#2ECC71"
  - type: VECTOR, name: "Path", x: 400, y: 200, w: 50, h: 50, fill: "#9B59B6"
tools_visible: [select, vector-edit]
ui_visible: [properties]

RECT

Rectangle with optional rounded corners.

Gizmos: 1 — corner radius (drag corner handle) Auto collider: Box (halfWidth = w/2, halfHeight = h/2)

ELLIPSE

Ellipse with arc system and 6 geometry modes.

Geometry modes

Gizmos: 3 — arc start, arc sweep, inner radius Auto collider: Circle (if w ≈ h, full), Box (if w ≠ h), Polygon (if partial arc)

STAR

Star with configurable geometry.

Gizmos: 3 — point count, inner radius, outer radius Auto collider: Polygon (convex hull of outer vertices, max 8 verts, fallback to Box)

POLYGON

Regular polygon with adjustable vertex count.

Gizmos: 2 — vertex count, radius Auto collider: Polygon (vertices directly, max 8)

VECTOR

Freeform vector path created with the Pen tool. Full vector network topology.

No shape-specific properties — geometry is defined by vertices, segments, and tangents in the vector network.

Gizmos: Per-vertex tangent handles in VectorEditMode Auto collider: Polygon (convex hull of VN vertices)

Vector network data

Vertices: Float32Array, stride 4
[x, y, tangentInX, tangentInY, tangentOutX, tangentOutY, ...]
``
Segments: Uint32Array, stride 2
[vertexA, vertexB, ...]

Tangents are relative to their vertex — rotating a vertex rotates its tangents automatically.

MIRRORED_VECTOR

Vector with symmetry constraints.

Symmetry modes

Gizmos: 2 — symmetry mode, symmetry axis Auto collider: Polygon (convex hull, same as VECTOR)

FRAME

Clipping container with background fill and corner radius.

Frame presets

Auto collider: Box

GROUP

Container without clipping. Children render without boundary constraints.

No additional properties beyond the common set. Groups are created by selecting multiple nodes and pressing Ctrl+G.

Common properties

All shape types share these properties:

Transform

Appearance

Metadata

→ Nodes → Properties → Globals