A double helix in deep space, animated from one English sentence. You asked Claude. Glyph drew it — from a compose spec, no hand-tweaked SVG. Two phosphate strands spiraling at ten base pairs per turn, against a deterministic starfield.
"Draw me DNA. The double helix. Two phosphate-sugar backbones winding around each other, base-pair rungs in the middle (A-T blue, G-C red), against a starfield because the blueprint of life deserves a backdrop. Beautiful for a 5-year-old, accurate for a molecular biologist."
— what to say to your AI agent. Claude writes the Glyph compose spec; the compose compiler emits gradients, polylines, starfield, and silhouette paths into one byte-locked SVG.
RFC #9 added everything we needed to render this without a single hand-authored SVG primitive: gradients, silhouette paths, polylines, and starfield.
Each strand is a sampled sine — 114 points along x = 90·sin(2π·y/170), joined as an SVG path. Strand A goes cyan-purple-magenta from top to bottom; strand B is π out of phase and runs the gradient backwards.
Every 24 px in y we draw a horizontal rung connecting the two strands — blue for A-T, red for G-C. Compose skips rungs where the strands cross (would be visually overlapping).
60 stars placed by a Park-Miller LCG seeded at 7. Same seed, same positions, byte-identical SVG on every CI run. A radial-gradient halo sits behind the helix; a giant rect at the back is filled by the same gradient.
Claude writes the compose JSON; Glyph's compose compiler turns it into byte-identical SVG. No CSS, no manual coordinates outside the spec.
// bio-dna.json — top level (children elided) { "compose": { "viewBox": { "width": 600, "height": 800 }, "title": "DNA double helix", "theme": { "background": "#020617" }, "defs": { "gradients": [ { "id": "g-strand-a", "kind": "linear", "x1": "0%", "y1": "0%", "x2": "0%", "y2": "100%", "stops": [ { "offset": "0%", "color": "#22d3ee" }, { "offset": "50%", "color": "#a78bfa" }, { "offset": "100%", "color": "#ec4899" } ] }, // ... g-strand-b (reverse stops), g-halo, g-bg ] }, "children": [ // 1. background rect, gradient-filled // 2. starfield { count: 60, seed: 7, region } // 3. glow halo behind the helix // 4. ~27 polyline rungs (A-T blue, G-C red) // 5. silhouette-path A (gradient stroke) // 6. silhouette-path B (reverse-gradient stroke) // 7. title + caption text ] } }
The points along each strand are computed once by a small generator script; the JSON itself is fully static. View on GitHub.
Byte-stable across Ubuntu / macOS / Windows × Node 20 / 22. The compose compiler emits <defs> with gradients + the deterministic starfield, then walks children in order.
Compose extends naturally to other biological scaffolds. Each is a few children and a defs block.
"Draw me a single nucleotide — phosphate, sugar, base. Labeled, against the same starfield. Show how four of these tile into the rungs of the helix."
"Draw me a triple helix — collagen. Three strands instead of two, wound at a tighter pitch. Use the same primitives, the same starfield, a different palette."
"Draw me telomeres at the ends of a chromosome — the repeating TTAGGG cap that shortens each cell division. Show three lengths: young cell, middle-aged cell, senescent cell."
"Draw me the RNA single helix — the older molecule. Beside the DNA double helix. Same scale, same backdrop, so the structural difference is the whole story."