Form follows function. You asked Claude. Glyph drew it — from a compose spec. A blue-glass tower at last light, hundreds of yellow-lit windows, an antenna with a blinking red warning light.
"Draw me a modern skyscraper at sunset. Tall rectangular tower with a grid of lit windows. Adjacent shorter buildings in silhouette. Antenna mast on top with a blinking red warning light. Dramatic dusk sky."
— 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.
A single 24×36 pattern with four yellow rectangles per tile. Tile it across the tower's facade and you get hundreds of lit windows for the cost of one pattern definition. Different opacities per rect give a few dark-window flickers.
A vertical 4-stop linear gradient (blue → red → orange → peach) for the sky. A separate diagonal gradient over the facade shows the sunset reflected on glass — angled top-right to bottom-left, low opacity, gold-to-transparent.
Thirty stars in the upper band (sky-only region). The antenna warning light is a tiny circle with a pulse loop at 1.5 s period, scale 1.4 — the same blink every aviation regulation requires.
Claude writes the compose JSON; Glyph's compose compiler turns it into byte-identical SVG.
{
"compose": {
"viewBox": { "width": 800, "height": 1000 },
"theme": { "background": "#0c1126" },
"defs": {
"gradients": [
{ "id": "g-dusk", "kind": "linear",
"x1": "0%", "y1": "0%", "x2": "0%", "y2": "100%",
"stops": [
{ "offset": "0%", "color": "#1e3a8a" },
{ "offset": "40%", "color": "#7c2d12" },
{ "offset": "70%", "color": "#dc2626" },
{ "offset": "100%","color": "#fed7aa" }
]
}
// ... g-tower, g-reflect, g-ground
],
"patterns": [ /* p-windows · 24×36 × 4 lit rects */ ]
},
"children": [
// 1. dusk sky linear gradient rect
// 2. starfield · 30 stars · seed 47 · top region
// 3. adjacent buildings silhouette + windows pattern
// 4. main tower silhouette (gradient fill)
// 5. tower windows (pattern fill)
// 6. facade sunset reflection (diagonal gradient)
// 7. art-deco setback at top
// 8. antenna mast polyline
// 9. warning light circle w/ pulse · 1.5 s
// 10. ground silhouette + sidewalk line
// 11. title + caption text
]
}
}
Generator script: scripts/gen-showcase-extensions.mjs · fixture: packages/core/__fixtures__/compose/arch-skyscraper.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.