Kinds.
Every drawable kind, every prop it takes, defaults, anchors, and a copy-paste snippet. Twelve shape kinds plus text.
At a glance
| kind | props (defaults) | anchor |
|---|---|---|
| circle | x, y (center), r (50), color | center |
| rect | x, y (top-left), w (100), h (100), color | top-left |
| roundRect | x, y, w (100), h (100), radius (10), color | top-left |
| ellipse | x, y, rx (→ r → 50), ry (→ rx), color | center |
| line | x1, y1, x2, y2, width (2), color | midpoint |
| arc | x, y, r (50), start (0), end (360)°, width (4), color | center |
| wave | x (0), y (180), width (canvas), amp (30), freq (1), phase °, thickness (3), color | — |
| path | points [x1,y1…], width (3), cap, join, closed, filled, color | bbox centre |
| polygon | points ≥6, filled (true), width (2), color | bbox centre |
| star | x, y, r (50), points (5), inner 0.45, filled, width | center |
| image | path (required), x, y | center |
| text | content, x, y, size (28), font, points (text-on-path), color | center |
All kinds accept alpha (1), rotate (0°), scale (1), layer (0). Unknown kinds, bad values, and missing font/image files fail fast at build with the entity name and time.
circle
Center-anchored. r is radius. Supports gradient fill.
shape("dot", "circle", table{"0": table{x: 320, y: 180, r: 40, color: "coral"}, "1": table{x: 500, y: 180, r: 80, color: "gold"}})Props: x y r color alpha rotate scale layer blend gradFrom gradTo gradAngle. Bbox for gradient is (x±r, y±r).
rect / roundRect
Top-left anchored, unlike circle. w h default to 100. roundRect adds radius (10). Both support gradient fill.
shape("box", "rect", table{"0": table{x: 100, y: 120, w: 200, h: 80, color: "sky"}, "1": table{x: 320, y: 120, w: 200, h: 80, color: "mint"}})
shape("pill", "roundRect", table{"0": table{x: 100, y: 220, w: 200, h: 60, radius: 14, color: "#e64c40"}})ellipse
Center-anchored. rx falls back to r then 50; ry falls back to rx. Gradient bbox is (x±rx, y±ry).
shape("egg", "ellipse", table{"0": table{x: 320, y: 180, rx: 80, ry: 40, color: "lavender"}, "1": table{x: 320, y: 180, rx: 40, ry: 80, color: "lavender"}})line
Two endpoints. width is stroke weight. Rotates around the midpoint (x1+x2)/2.
shape("rule", "line", table{"0": table{x1: 40, y1: 180, x2: 600, y2: 180, width: 2, color: "white"}, "1": table{x1: 40, y1: 260, x2: 600, y2: 100, width: 3, color: "coral"}})arc
Angles are degrees (engine converts to radians). Full 0→360 is a ring; partial is a hand. See spinner.lgv.
shape("ring", "arc", table{"0": table{x: 320, y: 180, r: 90, start: 0, end: 360, width: 6, color: "slate"}})
shape("hand", "arc", table{"0": table{x: 320, y: 180, r: 90, start: -90, end: -30, width: 10, color: "gold", rotate: 0}, "3": table{rotate: 720}} )wave
Engine-owned sine: y + amp·sin(2π(freq·s/width + phase/360)) sampled every 3px. Zero amplitude is a straight line. Negative width draws backwards.
shape("sea", "wave", table{"0": table{x: 0, y: 180, width: 640, amplitude: 10, frequency: 2, phase: 0, thickness: 3, color: "sky"}, "2": table{amplitude: 50, frequency: 4, phase: 360}})Props: x y width amplitude frequency phase thickness color alpha rotate scale layer. Defaults: x=0, y=180, width=canvas, amp=30, freq=1, phase=0, thickness=3.
path
Flat points=[x1,y1,x2,y2…] (≥4, even). Stroke by default; set filled=true to fill closed shape. cap: round|butt|square, join: round|bevel|miter. Same-length lists morph element-wise, mismatched snap.
shape("bolt", "path", table{"0": table{points: [320, 40, 280, 160, 340, 160, 300, 320], filled: true, color: "gold"}, "1": table{points: [320, 40, 280, 160, 340, 160, 300, 320], rotate: 360}})polygon
Closed polygon from points (≥6, even). filled=true by default. Gradient uses points bbox.
shape("tri", "polygon", table{"0": table{points: [320, 60, 220, 260, 420, 260], filled: true, color: "mint"}, "1": table{points: [320, 100, 260, 260, 380, 260], color: "sky"}})star
Center (x,y), outer r, points (5), inner 0–1 (0.45). Vertices alternate outer/inner, apex at 12 o'clock.
shape("star", "star", table{"0": table{x: 320, y: 180, r: 60, points: 5, inner: 0.45, color: "gold"}, "1": table{x: 320, y: 180, r: 90, points: 6, inner: 0.35, rotate: 180}})image
Raster asset. path is required and cached per process. No color/alpha/gradient — gg has no per-draw image opacity. Center-anchored.
shape("logo", "image", table{"0": table{path: "examples/assets/ball.png", x: 160, y: 180}, "2": table{x: 480, y: 180}})text
Call via shorthand text(name, keyframes) (same engine as shape). content snaps (no mid-word). size 28, font TTF path defaults to bundled Archivo Black, points turns the line into a path the glyphs ride (each rotated to its segment, see wave.lgv text-on-path).
text("title", table{"0": table{content: "hello", x: 320, y: 180, size: 56, color: "white"}, "1": table{content: "kyfram", x: 320, y: 180, size: 72, color: "coral"}})Gradients + transforms
Filled kinds (circle, rect, roundRect, ellipse, polygon, star) accept gradFrom gradTo gradAngle — linear gradient across the shape bbox at gradAngle°, with alpha honoured. Strokes, lines, arcs, waves, images, and text stay flat.
shape("sun", "circle", table{"0": table{x: 520, y: 90, r: 45, gradFrom: "gold", gradTo: "coral", gradAngle: 90}})All kinds share alpha rotate scale layer blend. blend: multiply | screen | add — entity renders to an offscreen layer then composites. Group children multiply alpha/scale/rotate. layer sorts stable at draw time.