fig

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 slide. Every one of those lifts the <svg> out and renders it as its own document. In that document no script ever runs and nothing is fetched. A figure animated from JavaScript freezes on its first frame there, or shows nothing at all. CSS @keyframes and SMIL are the only motion that survives the trip.

Five rules that document imposes. Break one and the figure dies quietly, looking fine on your screen:

1. Everything lives inside <svg>. The <style>, the gradients, the filters. Only the svg element travels; whatever sits in <head> is left behind.
2. xmlns="http://www.w3.org/2000/svg" on the svg. An HTML parser forgives a missing namespace. An <img> renders nothing without it.
3. Strict XML. Every tag closes, and no bare < or & anywhere, including inside a CSS comment, where it is easiest to forget. Write < and &.
4. No <script>, no event handlers, no requestAnimationFrame.
5. RTL is declared, never inherited. dir="rtl" is an HTML attribute and means nothing to an svg document, and the host page's direction stops at the image boundary. Put style="direction:rtl" on the <svg> itself, or every text-anchor="start" label jumps to the wrong side of its anchor.