Gravity solved. You asked Claude. Glyph drew it — from a compose spec. Two towers, a parabolic cable, hundreds of vertical suspenders, and a road floating in mid-air.
"Draw me a suspension bridge — Golden Gate style. Two red art-deco towers, a single parabolic main cable, vertical suspenders dropping to a deck, anchors on each side, deep water below, soft sky above."
— 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.
The main cable is one silhouette-path — 41 sampled points along y = min - dip × (1 - 4(t-0.5)²), the parabola you get when a uniform horizontal load hangs from a flexible cable.
Vertical cables connecting the main parabola to the deck — each one a 2-point polyline at the sampled cable position. Their length grows toward the center where the cable dips lowest.
Each tower is a tapered trapezoidal d-string filled with a 3-stop linear gradient (the art-deco red). Cross-braces are polylines that get longer as they descend. The deck is a single rect; the centerline is a dashed polyline.
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-tower", "kind": "linear",
"x1": "0%", "y1": "0%", "x2": "100%", "y2": "0%",
"stops": [
{ "offset": "0%", "color": "#7c2d12" },
{ "offset": "50%", "color": "#dc2626" },
{ "offset": "100%","color": "#7c2d12" }
]
}
// ... g-sky, g-water
]
},
"children": [
// 1. sky gradient rect
// 2. water gradient rect
// 3. side cable left (anchor → tower top)
// 4. side cable right
// 5. 17 vertical suspender polylines
// 6. main parabolic cable (40-sample silhouette)
// 7. 2 tower silhouette-paths (gradient fill)
// 8. 8 tower cross-brace polylines
// 9. deck silhouette + dashed centerline
// 10. 2 annotation-leaders (cable, tower)
// 11. caption text
]
}
}
Generator script: scripts/gen-showcase-extensions.mjs · fixture: packages/core/__fixtures__/compose/eng-bridge.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.