Animated figure · replication

Inside a closed circuit

A circuit is one path. The source raises the potential difference, the conductor carries the charge, the load turns it into light, and the return path closes the loop. Break the loop anywhere and the current stops everywhere at once — the bulb is the proof. This figure is built with the same technique as the “Inside a harness” and “LLM RL · multi-rollout” figures in the FineEnvs multi-harness-rl article: no video, no GIF, no animation library.

How these animations are built → Download the raw embed
Live figure. Press Switch: closed to break the loop, and drag Resistance down to watch the current, the drift speed, the meter bars and the bulb brightness move together — because they are all derived from one state value, I = V/R.

THE CLOCK

One requestAnimationFrame loop. Each frame it takes the real elapsed time, clamps it (dt ≤ 64 ms) so a backgrounded tab cannot fast-forward, then advances the state.

THE STATE

A plain object: stage index, phase, particles, samples, lever angle, brightness. Every visible thing is a function of it. Nothing animates itself.

THE RENDER

The whole SVG is rebuilt as a string and assigned to innerHTML once per frame. No diffing, no retained element references, no stale attributes.

THE LIFECYCLE

IntersectionObserver pauses it off-screen, ResizeObserver re-runs the layout pass, a data-theme mutation re-reads the colours, and prefers-reduced-motion renders a still frame.