Flow Primer

Category: primers. A battery drives current around a loop and the lamp glows in time. The classic "what is current?" explainer — pure SVG + CSS.

Flow freezes under prefers-reduced-motion.
current + – battery lamp

Use it. Link the stylesheet and drop in the markup. Wrap in .motion--light for the light palette; set --motion-speed to retune the flow rate.

<link rel="stylesheet" href="/assets/motion/motion.css">

<div class="motion-scope">
  <svg class="motion-flow" viewBox="0 0 320 200" role="img"
       aria-label="A battery pushing current around a loop to light a lamp.">
    <path class="mf-wire"    d="M80 50 H240 V87 M240 113 V150 H80 V112 M80 88 V50" />
    <path class="mf-current" d="M80 50 H240 V87 M240 113 V150 H80 V112 M80 88 V50" />
    <!-- battery + lamp + labels … see full demo source -->
  </svg>
</div>

Decision record: SevIQ/docs/adr/0001-svg-css-motion-basics.md.