Geometry 2D
SVG coordinate plane and geometry primitives for math diagrams
Installation
npx docsui-cli@latest add geometry-2dUsage
Wrap all Fig* primitives inside <FigScene>. The scene owns the SVG root,
coordinate transform, grid, and axes. Children use world coordinates — no pixel math.
import {
FigScene,
FigPoint,
FigVector,
FigCircle,
FigAngle,
FigPolygon,
FigLabel,
} from "@/components/mdx/geometry-2d";Examples
Pythagorean theorem
A right triangle with labelled sides and the angle θ.
Vectors in 2D
Adding two vectors u and v to get u + v.
Unit circle
The unit circle with a point at angle θ and its x/y projections.
Props
FigScene
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 400 | SVG pixel width |
height | number | 300 | SVG pixel height |
xRange | [number, number] | [-5, 5] | World x axis range |
yRange | [number, number] | [-5, 5] | World y axis range |
showGrid | boolean | true | Show background grid |
showAxes | boolean | true | Show x/y axes with ticks |
label | string | "Geometry diagram" | Accessible SVG label |
FigPoint
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | — | World x |
y | number | — | World y |
label | string | — | Text label |
labelDir | "ne" | "nw" | "se" | "sw" | "ne" | Label placement |
r | number | 4 | Dot radius (px) |
FigVector
| Prop | Type | Default | Description |
|---|---|---|---|
fromX | number | 0 | Tail x |
fromY | number | 0 | Tail y |
toX | number | — | Head x |
toY | number | — | Head y |
label | string | — | Midpoint label |
FigCircle
| Prop | Type | Default | Description |
|---|---|---|---|
cx | number | — | Center x |
cy | number | — | Center y |
r | number | — | World-unit radius |
fill | string | "none" | Fill color |
dashed | boolean | false | Dashed stroke |
FigAngle
| Prop | Type | Default | Description |
|---|---|---|---|
vertex | {x,y} | — | Angle vertex |
from | {x,y} | — | Point on first ray |
to | {x,y} | — | Point on second ray |
label | string | — | Arc label |
radius | number | 0.5 | Arc radius (world units) |