Traditional vector paths are sequential chains — point A connects to B connects to C. You cannot branch. You cannot share an edge between two regions. You cannot build a T-junction.
Vector networks store topology as a graph. Any vertex connects to any other vertex. Segments are explicit pairs, not implied by order. This is how geometry actually works.
Vector network topology
A shape with T-junctions and branching segments — impossible with traditional paths
Typed-array data model
Vertex data lives in a Float32Array with stride 4: x, y, cornerRadius, flags. Segments are Uint32Array pairs. Tangents are 4 relative offsets per segment. Regions group closed loops with independent fill stacks.
Move a vertex and its tangent handles follow automatically — tangents are stored as relative offsets, not absolute positions. Zero-copy flat accessors ready for WASM handoff.
| Buffer | Type | Stride | Contents |
|---|---|---|---|
| Vertices | Float32Array | 4 | x, y, cornerRadius, flags |
| Segments | Uint32Array | 2 | fromVertex, toVertex |
| Tangents | Float32Array | 4 | dt1x, dt1y, dt2x, dt2y (relative) |
| Regions | Region[] | — | fills, windingRule, loops |
Complex topology
T-junctions. Branching trees. Shared edges between regions. Multi-valence vertices where 5 segments meet at one point. Shapes that no path-based tool can represent.
Branching vector structure
Vertices with 3+ connections forming a network with shared edges and T-junctions
Direct vertex editing
VectorEditMode gives you full control over topology. Select vertices, segments, or tangent handles individually. Split a segment at any point. Nudge selections with arrow keys. Resize with OBB-aware bounding boxes that respect vertex orientation.
Marquee select across vertices. Ctrl+click to toggle smooth/corner tangents. Dissolve a vertex to merge its neighbors. Every operation preserves topology.
Pen drawing
PenMode draws freeform paths with click-to-place vertices and drag-to-set tangents. Curves appear as you draw. The result is a full vector network — editable with all VectorEditMode tools immediately after drawing.
Mirrored symmetry
3 symmetry modes built into vector shapes. Cn (cyclic) rotates N copies. Dn (dihedral) mirrors and rotates — snowflakes, mandalas. Bilateral mirrors once — butterflies, faces.
Edit one sector. All copies update instantly. Drag a vertex to the center and epsilon collapse merges all copies into a single multi-valence point.
6 ellipse modes
Ellipses with a full arc system: 6 geometry modes, 3 on-canvas gizmos. Drag the arc angle, start angle, and sweep directly on the shape. Pies, rings, half-circles — without boolean operations.
Stars and polygons
Stars expose 3 gizmos: inner radius, outer radius, point count. Polygons expose 2 gizmos: vertex count, radius. Drag to adjust on canvas. Enter VectorEditMode and the parametric shape converts to an editable mirrored vector with symmetry preserved.
Multi-paint stacking
Stack fills and strokes on one shape — no layer tricks. Each paint layer is independent: solid color, linear gradient, radial gradient, angular gradient, or diamond gradient.
4 gradient types
Linear, radial, angular, diamond. Each gradient has its own 2x3 affine transform matrix. Rotate, scale, skew gradients independently from the shape. 3 draggable control points per gradient: start, end, perpendicular.
Formula-bound paint
Bind any color channel to a formula. Shift hue with this.fills[0].h = time * 60. Derive lightness from physics velocity. 3 color spaces: HSV, LAB, OKLCH — 11 bindable sub-properties per paint.
this.fills[0].color.r = mouse.x / 800 // red tracks cursor
this.fills[0].h = time * 120 // hue rotates 120 deg/sec
this.fills[0].L = clamp(this.velocityY / 500, 0, 1) // OKLCH lightness from speedFormula-driven color
A shape whose fill hue rotates over time using a formula bound to the HSV hue channel
Figma comparison
Figma introduced vector networks in 2016. The concept stopped there.
| Capability | Figma | Formo |
|---|---|---|
| Graph topology | Basic | Full — T-junctions, multi-valence, shared edges |
| Vertex storage | Opaque | Float32Array, stride 4, WASM-ready |
| Tangent model | Absolute | Relative offsets — vertices drag without tangent recalculation |
| Regions | No | Per-region fill stacks with winding rules |
| Symmetry modes | No | Cn, Dn, bilateral — 3 modes |
| Formula binding | No | 11 paint sub-properties across 3 color spaces |
| Ellipse modes | 3 | 6 with arc system |
| Split/dissolve/join | Basic | Full topology operations with undo |
| Gradient transforms | Per-gradient | Per-gradient with independent 2x3 affine matrix |
Go deeper
- All features — the complete feature list
- Reactive formulas — bind any property to an expression
- Documentation — concepts, reference, and tutorials