Fire on wheels. You asked Claude. Glyph drew it — from a compose spec. The wheels rotate via SMIL; the boiler glints; smoke puffs into the morning.
"Draw me a classic steam locomotive in profile. Black boiler, red cab, smokestack with smoke. Four wheels (one leading + three drivers) with a connecting rod. Wheels should rotate. Rails, ties, countryside hills."
— what to say to your AI agent. Claude writes the Glyph compose spec; the compose compiler emits one byte-locked SVG.
RFC #9's defs (gradients + patterns), shapes (silhouette-path, polygon, polyline, ellipse), and accents (glow, starfield, icon) compose the whole picture.
Four gear marks (RFC #7) — one leading wheel at 24 teeth, three drivers at 28. All four animate together with a rotate-loop at 4 s period. The golden connecting rod is a single thick silhouette-path linking the driver hubs.
Boiler is a black rectangle with a 3-stop gradient (g-boiler). The smokestack, steam dome, whistle, cab, and roof overhang are individual silhouette-path rectangles or trapezoids. Boiler bands are 3 yellow polylines across the gradient.
Smoke puffs are circles with a g-smoke radial gradient (gray → transparent). The far hills are one silhouette-path with sampled peaks. Headlight is a yellow circle on the boiler face; rails are two long polylines; ties are 15 small rects.
Claude writes the compose JSON; Glyph's compose compiler turns it into byte-identical SVG.
{
"compose": {
"viewBox": { "width": 1200, "height": 600 },
"theme": { "preset": "pencil-parchment" },
"defs": {
"gradients": [
{ "id": "g-boiler", "kind": "linear",
"stops": [
{ "offset": "0%", "color": "#1f1a14" },
{ "offset": "60%", "color": "#3a3a2a" },
{ "offset": "100%","color": "#1f1a14" }
]
}
// ... g-sky, g-smoke (radial)
]
},
"children": [
// 1. sky + ground gradient rects
// 2. far hills silhouette
// 3. 5 smoke puff circles (radial gradient)
// 4. boiler silhouette + 3 yellow bands
// 5. boiler front circle + headlight
// 6. smokestack + steam dome + whistle
// 7. cab + roof + window
// 8. connecting rod (5px silhouette)
// 9. 4 gear wheels w/ rotate-loop · 4 s period
// 10. 4 wheel pin circles
// 11. 2 rails + 15 ties
// 12. caption text
]
}
}
Generator script: scripts/gen-showcase-extensions.mjs · fixture: packages/core/__fixtures__/compose/eng-locomotive.json. View on GitHub.
Byte-stable across Ubuntu / macOS / Windows × Node 20 / 22. The compose compiler resolves the gradient + pattern defs first, then walks children in z-order.