The engine of you. You asked Claude. Glyph drew it — from a compose spec, with a real SMIL pulse animation on the heart muscle. Anatomical front view: four chambers, the great vessels, the lungs. Pencil on parchment.
"Draw me a heart with circulation. Anatomical front view: four chambers (RA, RV, LA, LV), aorta arching up and down, pulmonary trunk splitting to both lungs, vena cavae entering the right side, pulmonary veins from the lungs. The heart should pulse. Pencil-on-parchment."
— 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.
One d-string with eight cubic Béziers traces the pear-shaped organ. Two pulled-up lobes at the top (the atria), a tapered body, a slight apex pointing down-left (the natural orientation of a real heart in the chest). Filled with a 3-stop radial gradient (rose → red → maroon).
Six silhouette-paths for the aorta (with thin inner highlight tube for the pencil-cross-section look), pulmonary trunk splitting both ways to the lungs, paired vena cavae, and the pulmonary veins. Color convention: red = oxygenated, blue = deoxygenated.
An RFC #6 pulse loop animation on the heart silhouette + septum + chamber labels makes the heart contract once per 0.9 seconds — that's ~67 bpm, the resting rate of a healthy adult.
Claude writes the compose JSON; Glyph's compose compiler turns it into byte-identical SVG.
{
"compose": {
"viewBox": { "width": 1100, "height": 700 },
"theme": { "preset": "pencil-parchment" },
"defs": {
"gradients": [
{ "id": "g-heart", "kind": "radial",
"cx": "40%", "cy": "40%", "r": "60%",
"stops": [
{ "offset": "0%", "color": "#fda4af" },
{ "offset": "55%", "color": "#dc2626" },
{ "offset": "100%", "color": "#7c2d12" }
]
}
// ... g-lung (radial, lavender-blush)
]
},
"children": [
// 1. left lung silhouette (radial lavender)
// 2. right lung silhouette (radial lavender)
// 3. 2 lung-hatching silhouettes (pencil shading)
// 4. aorta silhouette (red, arches up + descends)
// 5. aorta inner-highlight tube
// 6. 3 aortic branches (head + arms)
// 7. pulmonary trunk → L+R pulm arteries (blue)
// 8. L+R pulmonary veins (red, lung → LA)
// 9. superior vena cava (blue, from above → RA)
// 10. inferior vena cava (blue, from below → RA)
// 11. heart silhouette · pulse loop · 900 ms
// 12. septum line · pulse loop
// 13. AV groove line · pulse loop
// 14. 4 chamber labels RA, RV, LA, LV · pulse loop
// 15. 4 annotation-leaders (aorta, SVC, pulm artery, pulm vein)
// 16. title + caption text
]
}
}
Generator script: scripts/gen-showcase-extensions.mjs · fixture: packages/core/__fixtures__/compose/bio-circulation.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.