Parametric Shapes

Draw anything. Adjust everything. 5 types, 14 gizmos.

Five shape types with on-canvas gizmos. Every parameter adjustable in real time — drag a gizmo, type a number, or bind a formula.

Rectangle

Corner radius with per-corner control. 1 gizmo for radius adjustment directly on canvas.

title: "Rounded rectangle"
description: "Drag the corner gizmo to adjust radius"
nodes:
  - type: RECT, name: "Card", x: 200, y: 200, w: 200, h: 120, fill: "#3498DB", cornerRadius: 16
tools_visible: [select]
ui_visible: [properties]

Ellipse

6 geometry modes with arc system. Full ellipse, arc, pie, half, ring, and more. 3 on-canvas gizmos control arc start, sweep, and inner radius.

title: "Pie chart slice"
description: "An ellipse in pie mode with adjustable arc"
nodes:
  - type: ELLIPSE, name: "Slice", x: 200, y: 200, w: 150, h: 150, fill: "#E74C3C", arcStart: 0, arcSweep: 120, geometryMode: "pie"
tools_visible: [select]
ui_visible: [properties]

Bind arc properties to formulas for animated gauges, progress indicators, and data visualizations.

Star

Inner radius, outer radius, and point count. 3 gizmos for direct manipulation. Formula-bind point count for animated star bursts.

title: "Configurable star"
description: "Drag gizmos to adjust inner radius and point count"
nodes:
  - type: STAR, name: "Star", x: 200, y: 200, w: 150, h: 150, fill: "#F39C12", points: 5, innerRadius: 0.4
tools_visible: [select]
ui_visible: [properties]

Polygon

Regular polygon with adjustable vertex count and radius. 2 gizmos. From triangle to dodecagon — one parameter.

Vector (Freeform)

Draw with the Pen tool. Click to place vertices, drag for tangent control. Full vector network topology — connect any vertex to any other.

Switch to Vector Edit mode for direct vertex/segment/tangent manipulation. Split segments, nudge with arrow keys, delete or dissolve vertices.

→ Deep dive: Vector networks

Mirrored Vector

Cn, Dn, and bilateral symmetry modes. Edit one side of the shape — the other side updates automatically. Symmetry integrated into VectorEditMode with 2 dedicated gizmos.

Frames

Clipping containers with background fill and corner radius. Children are clipped to the frame boundary.

Frames support clipLocked (children can't be selected through) and selectionPassthrough (click through to children).

Paint System

Multi-paint stacking

Stack multiple fills and strokes on a single shape. Each layer can be a different type.

5 gradient types

Linear, radial, angular, diamond — plus solid color. Each gradient has its own transformation matrix for independent rotation, scale, and skew.

Formula-bound paint

Bind any paint sub-property to a formula:

• Color channels (R, G, B, A)
• Derived color spaces (HSV, LAB, OKLCH)
• Gradient stop positions
• Gradient stop colors

Properties panel shows fx badge on formula-bound paint swatches.

→ Explore formulas

On-Canvas Gizmos

Every adjustable parameter has an on-canvas gizmo. Drag to adjust — see the result instantly.

Gizmos work in the correct coordinate space — rotate a shape and the gizmos rotate with it.

Open Formo →