Shapes

Vizzy provides factory functions for creating shapes. Every factory returns a shape object that you can position, style, and add to the scene.

Basic Shapes

The most common shapes. Use the color shorthand to set the stroke color in one line:

All shapes accept an optional props object. Without props, you get sensible defaults (radius 1, width 2, etc.).

More Shapes

Polygons, stars, ellipses, and squares:

Full list of shape factories

circle(), rect(), line(), arrow(), polygon(), regularPolygon(), triangle(), square(), ellipse(), arc(), star(), point(), text(), tex(), dashedLine(), vector(), doubleArrow(), curvedArrow(), arcBetweenPoints(), rightAngle(), surroundingRectangle(), numberLine(), axes(), functionGraph(), brace(), braceOver(), braceBetween(), angleShape(), edgeLabel(), lineLabel(), label(), group()

Lines and Arrows

line() and arrow() support a positional shorthand — pass start and end points directly instead of a props object:

Positioning

Shapes start at the origin. Three ways to position them:

• shift(x, y) — move by a relative offset (chainable)
• moveTo([x, y]) — move to an absolute position
• nextTo(shape, direction) — place adjacent to another shape

Direction constants: UP, DOWN, LEFT, RIGHT, UP_LEFT, UP_RIGHT, DOWN_LEFT, DOWN_RIGHT, ORIGIN.

Colors

Use the color shorthand for simple stroke coloring, or the style object for full control over stroke, fill, and opacity:

Vizzy includes the full Tailwind color palette. Each color has shades from [50] (lightest) to [950] (darkest), and an .alpha(n) method for transparency.

Available colors

red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, plus white and black.

Groups

Use group() to compose shapes into a single unit. Groups can be positioned and transformed together. arrange(direction, spacing) auto-layouts children in a row or column:

Groups also support moveToFront(shape) and moveToBack(shape) for z-ordering within the group.

Text and Labels

text() renders plain text. label(shape, content, direction) is a convenience that positions text near a shape automatically:

For math formulas, use tex() which renders LaTeX via KaTeX. See the TeX Formulas example in the gallery.

Axes and Function Graphs

axes() creates a coordinate system with tick marks and optional labels. functionGraph() plots a function on axes:

Axes auto-frame the camera to fit their range. Use c2p([x, y]) (coord-to-point) and p2c([x, y]) (point-to-coord) to convert between axis coordinates and world coordinates.

TIP

Use ax.plot(fn, opts) as a shorthand for creating and adding a function graph to axes in one call.