Life in Glyph · RFC #9 · bio extension

Draw me a butterfly

Symmetry made wings. You asked Claude. Glyph drew it — from a compose spec. Two pairs of polygons mirrored across the body axis, with gradient fills and eyespots.

▸ The prompt
"Draw me a butterfly, top-down view. Two pairs of wings, symmetric across the body. Forewings with sunset gradient + eyespots. Hindwings darker purple-blue. Antennae. Pencil-on-parchment."

— what to say to your AI agent. Claude writes the Glyph compose spec; the compose compiler emits one byte-locked SVG.

A top-down butterfly: orange-to-purple gradient forewings with white-and-black eyespots, darker indigo hindwings with golden spots, a black body and head, two curling antennae with club tips.

One scene, three primitives

RFC #9's defs (gradients + patterns), shapes (silhouette-path, polygon, polyline, ellipse), and accents (glow, starfield, icon) compose the whole picture.

PRIMITIVE 1
polygon × 4

The wings

Each wing is a 7-point polygon — forewing and hindwing, drawn once on the right, then mirrored to the left by negating x. Linear-gradient fills give the sunset-to-twilight color story.

PRIMITIVE 2
ellipse + circle × 6

Eyespots & body

Eyespots on the forewings: a white-ish ellipse plus a black pupil circle (the predator-deterring trick that survives in fossils). The body is one tall narrow ellipse; the head is a small circle.

PRIMITIVE 3
silhouette-path × 2

The antennae

Two curling antennae — each a quadratic-Bézier d-string (just three points: start, control, end) ending in a tiny club-tip circle. The whole insect is ten polygons and four primitives.

How Glyph drew it

Claude writes the compose JSON; Glyph's compose compiler turns it into byte-identical SVG.

The compose spec JSON · excerpt

{
  "compose": {
    "viewBox": { "width": 800, "height": 600 },
    "theme": { "preset": "pencil-parchment" },
    "defs": {
      "gradients": [
        { "id": "g-wing-r", "kind": "linear",
          "x1": "0%", "y1": "0%", "x2": "100%", "y2": "100%",
          "stops": [
            { "offset": "0%",  "color": "#fbbf24" },
            { "offset": "60%", "color": "#dc2626" },
            { "offset": "100%","color": "#581c87" }
          ]
        }
        // ... g-wing-l (mirror), g-hind-r, g-hind-l
      ]
    },
    "children": [
      // 1. 2 hindwing polygons (right + mirrored left)
      // 2. 2 forewing polygons (right + mirrored left)
      // 3. body ellipse + head circle
      // 4. 2 antenna silhouette-paths + 2 club tips
      // 5. 4 eyespot ellipses + pupils
      // 6. 2 golden hindwing spots
      // 7. title + caption text
    ]
  }
}

Generator script: scripts/gen-showcase-extensions.mjs · fixture: packages/core/__fixtures__/compose/bio-butterfly.json. View on GitHub.

Glyph compose output SVG

Glyph-rendered draw me a butterfly, same SVG as the hero stage

Byte-stable across Ubuntu / macOS / Windows × Node 20 / 22. The compose compiler resolves the gradient + pattern defs first, then walks children in z-order.

More Life in Glyph

See the gallery ↗ DNA Heart Sunflower