figlisted

Some ideas are explained better by a 5-second looping animation than by 100 lines of text. Sketch the figure in ASCII first: static layout, labelled motion, loop length. Get a yes before writing the svg. After building, look at the rendered file as a stranger would and refine once before handing back. ASCII covers structure; visual issues (collisions, weak contrast, orphan elements, dated chrome, loose components that should be grouped) only appear on screen. ## Guidelines - **Subject fit.** Invent a visual metaphor for this specific idea. The same concept can be drawn many ways (a flow as a path, ripples, falling sand, expanding rings; a network as nodes, a constellation, a colony of pulses). Reach past the obvious shape. - **One accent.** One thing moves meaningfully, in one accent colour. Show direction through motion, not a second hue. - **Loop cleanly.** End frame equals start frame, or fade-pause-fade. No jerk at the seam. - **Caption economy.** One short title plus a 5-word caption at most. The figure carries it. - **Calm by default.** 5 to 10 second loops, `easeInOutCubic` or `easeInOutSine`. Bounce and elastic read as toy. Pick fonts, palette, background, canvas, and layout for the subject. Nothing below is a default. ## Stack One HTML file, one inline `<svg>`, motion in CSS. No JavaScript, no CDN, no build step. That is not taste, it is the delivery format. A fig is made to be embedded: as an `<img>` in a report, as an attachment in an email, as a paste in a