Every card is a complete xsvg document, compiled live in your browser. Click any one to open it in the viewer (pan, zoom, inspect), or hit Edit in Playground to tweak it.
Start here — one file, three x:artboard slides touring what the format is. names a slide frame; the preview pages them with nav (§5.2).
Realistic composites that combine several features.
— bind to a shape or flow inside its outline.
children flow a as stacked paragraphs — space-before/after (paragraph-spacing), per-paragraph align (justify), first-line indent, and per-paragraph font/fill — plus a vertically-centered pull-quote built from three styled paragraphs (§6.16)
/ : hanging-indent items whose drawn bullet shapes (disc / ring / square, optically balanced) and decimal→alpha→roman numbers cycle by depth, with the outer counter resuming after each sublist; a third list flows inside a referenced card (§6.14)
outline="true" — lower glyphs to geometry (§6.12).
— outline text and warp it onto a curve (§6.13).
skew shears upright glyphs onto a wave; rainbow rotates and bends them along an arc, with baseline-shift floating runs above and below the same path
align start/middle/end and a start offset place the run along the path; effect="stair" steps live selectable glyphs (also skew's no-font fallback)
— bake an envelope-preset field into plain path geometry (§7.3).
eight presets — arch/flag/rise/wave + fisheye/inflate/squeeze/twist — over a rect + outlined text; the quality profile grades the bake tolerance
arc (annular sector, both bends) + arc-lower/upper, bulge, fish, shell-lower/upper — Make-with-Warp parity complete, 15/15
corners-solved homography (straight lines stay straight), bilinear free distort, and the distort-h/v sliders composing after a preset
— lines routed between two boxes' edges (§7.6).
lines bound to two boxes, routed four ways — straight (edge-clipped), x-major and y-major orthogonal rails, and a smooth curve; arrowheads tint to the stroke, and the route re-derives when an endpoint moves
/// — author-set columns, row heights that grow to fit wrapped content (the Slides/Canva model), baked to rects + text (§6.15).
a fixed label column plus two flexible columns (cols="150 * *"), bold header cells with a header-fill, and body cells that wrap to their column and grow the row to fit the tallest — content-driven row heights, not HTML auto-layout; per-cell bg/align/weight overrides, all baked to plain rects + text
compile-time color tokens (var(name) in any paint) + font tokens (x:font, an overridable base) — §4.1.
a linear data frame (bars & lines) and an angular one — coordinate systems, not a charting library (§7.8–7.9).
maps a data domain to a pixel box (y inverted, sizes stay in px): a bar chart with y-ticks, gridlines, labels and bottom-aligned s, and a line chart whose y-domain "20 25" puts 22.5 mid-height, with dot markers and an area fill
— grow/shrink a region by a Minkowski offset, baked to one (§7.7).
— Pathfinder ops baked to one (§7.4).
union merges a circle cloud under one stroke; subtract punches text from a plate; intersect/exclude; and a boolean warped by flag — composability both ways
— corner colors on a quad/tri mesh with cracks, fitted and lowered as texel-aligned tiny PNGs (§8.2).
the classic use case: gel pill buttons as two patches — an opaque body mesh under a FEATHERED capsule gloss (its mesh IS the inset lens shape; alpha dissolves the shine), grounded by a compiled drop-shadow()
filter="brightness(1.2) …" — CSS filter functions lowered to portable primitives (§8).
in="#id" on an x: element resolves its compiled output — features chain.
a textbox flowed inside a boolean union; type riding a warp's arched spine; a path → warp → textpath chain with one edit point
x:layer="background|foreground" on a restacks at compile; still plain SVG uncompiled (§5.1).