Skip to content

Shapes

Every shape Vizzy exposes. Each entry shows the factory function (lowercase, preferred) - the equivalent class (CircleShape, RectShape, etc.) is also exported for advanced use.

Primitives

FactorySignatureDescription
circlecircle({ radius?, color?, style? })Circle with given radius (default 1).
rectrect({ width?, height?, cornerRadius?, color?, style? })Rectangle with optional rounded corners.
squaresquare({ size?, cornerRadius?, style? })Square convenience wrapper around rect.
ellipseellipse({ rx?, ry?, style? })Ellipse with independent x/y radii.
lineline(start, end, { color?, style? }) or line({ start, end, ... })Straight line segment.
polygonpolygon({ points, closed?, style? })Arbitrary polygon from point list.
regularPolygonregularPolygon({ sides?, radius?, center?, color?, style? })Regular n-sided polygon.
triangletriangle({ radius?, center?, color?, style? })Equilateral triangle.
starstar({ points?, outerRadius?, innerRadius?, center?, style? })n-pointed star.
arcarc({ center?, radius?, startAngle?, endAngle?, style? })Circular arc segment.
pathnew PathShape({ commands, style? })SVG-style path from command list.

Arrows & Vectors

FactorySignatureDescription
arrowarrow(start, end, { color?, style? }) or arrow({ start, end, tipSize?, ... })Arrow from point to point.
doubleArrowdoubleArrow({ start?, end?, tipSize?, style? })Arrow with tips on both ends.
curvedArrowcurvedArrow({ start?, end?, angle?, tipSize?, style? })Curved arrow with bend angle.
vectorvector({ direction?, tipSize?, style? })Arrow from origin in a direction.

Text & Labels

FactorySignatureDescription
texttext({ content, position?, style? })Plain text shape.
textex({ content, position?, style? })LaTeX-rendered math (powered by KaTeX).
labellabel(shape, content, direction?, { offset?, style? })Auto-positioned text near a shape.
edgeLabeledgeLabel({ shape, edge, content, offset?, style? })Text pinned to a shape's edge ('top' | 'bottom' | 'left' | 'right' | 'center').
lineLabellineLabel({ start, end, content, offset?, side?, style? })Text alongside a line segment.

Math & Diagrams

FactorySignatureDescription
axesaxes({ xRange?, yRange?, xLength?, yLength?, includeNumbers?, includeTicks?, includeTip?, xLabel?, yLabel?, ... })Cartesian axes with coordToPoint / c2p helper.
numberLinenumberLine({ range?, length?, includeNumbers?, includeTicks?, includeTip?, ... })Standalone number line.
functionGraphfunctionGraph({ fn, axes, xRange?, ... })Plot a function on an axes. Use axes.plot(fn) for shorthand.
tangentLinetangentLine({ fn, axes, x, length?, style? })Tangent line to a function at x.
lineThroughlineThrough({ p1, p2, extend?, style? })Extended line through two points.
arcBetweenPointsarcBetweenPoints({ start, end, angle?, style? })Arc connecting two points with given bend.
angleShapeangleShape({ vertex, point1, point2, radius?, ... }) or angleShape({ line1, line2, ... })Angle arc between rays or lines.
rightAnglerightAngle({ vertex, point1, point2, size?, style? })Right-angle marker (small square).
bracebrace({ start, end, direction?, sharpness?, style? })Curly brace between two points.
braceOverbraceOver({ shape, edge?, label?, sharpness?, labelOffset?, style?, labelStyle? })Brace around one side of a shape, optionally labeled.
braceBetweenbraceBetween({ from, to, edge?, label?, ... })Brace spanning two shapes.

Dots, Grids & Markers

FactorySignatureDescription
pointpoint({ position?, radius?, color?, style? })Small filled dot (thin wrapper over circle).
gridgrid({ step?, style? })Background coordinate grid. Usually called without args.
dashedLinedashedLine({ start?, end?, dashPattern?, style? })Line with dashed stroke.
surroundingRectanglesurroundingRectangle({ shape, padding?, cornerRadius?, style? })Rectangle sized to wrap a shape.

Groups

FactorySignatureDescription
groupgroup(...children)Combine shapes into a single transformable unit.

All group methods, shift, moveTo, scale, rotate, nextTo, etc., propagate to children.

Shape methods

Every shape supports a common transform and positioning API:

MethodDescription
shift(dx, dy)Translate by offset.
moveTo([x, y])Move center to absolute position.
scale(s) or scale(sx, sy)Uniform or independent scaling.
rotate(angle)Rotate by radians around center.
nextTo(other, direction, buffer?)Place adjacent to another shape.
.center, .top, .bottom, .left, .rightAnchor points for positioning.
.width, .heightBounding dimensions.

See the Shapes guide for worked examples.