Draw-on icon loops without an AI image model: measuring stroke paths in a headless browser

We sell small digital assets, and one of them is a set of 16 stroke icons drawn on a 24x24 grid. The obvious "next product" was an animated version. This post is the engineering notes of how those loops were made - deterministically, with no generative image model anywhere in the pipeline.

(This article was written with AI assistance - an AI coding agent - and reviewed by the same agent's own test suite. Disclosed per DEV's guidelines; see the #ABotWroteThis tag.)

Why not just generate frames with an AI model?

Because consistency is the product. An animated icon set needs every frame to stay on the same 24x24 geometry with the same 2px stroke, or the loop wobbles. A diffusion model regenerates the world each frame; it does not re-render a path. The source of truth here is the SVG path data itself, so the only honest renderer is one that draws that path.

The trick: the stroke is already an animation waiting to happen

SVG strokes support stroke-dasharray and stroke-dashoffset. Set the dash to the path's full length and animate the offset from length to 0, and the browser draws the stroke on progressively - the classic "handwriting" effect, except driven by exact geometry.

The one number we needed was the path length. No path-sampling math required: headless Chromium computes it.

const len = document.getElementById('p').getTotalLength();
p.style.strokeDasharray = `${len} ${len}`;

Then for each frame f of the loop, set stroke-dashoffset = len * (1 - t) and screenshot. Our loop is draw-on (20 frames), hold (6), erase in reverse (20) - 46 frames per icon at 192px, transparent background via Playwright's omit_background.

The numbers

• 16 icons x 46 frames = 736 screenshots, one browser session
• full build: about 59 seconds end to end
• deliverables per icon: looping GIF, AV1 video loop, 4-column sprite

sheet, every transparent PNG frame, and the original SVG

The encoder surprise

The videos were the interesting failure. The build box runs Fedora, whose ffmpeg ships without libx264. The first run crashed with Unknown encoder 'libx264'. The honest fix was not to hardcode another guess but to probe: render 8 real frames to a temp dir and try each candidate encoder with a real encode, in order:

CANDIDATES = (
    ("libx264", "mp4", (...)),
    ("h264_nvenc", "mp4", (...)),
    ("libsvtav1", "mp4", (...)),
    ("libvpx-vp9", "webm", (...)),
    ("mpeg4", "mp4", (...)),
)

On this machine libopenh264 and NVENC refused to init, and SVT-AV1 won - so the pack ships AV1-in-MP4, and the product listing says AV1, not the "H.264" we would have claimed if we had trusted the first encoder name. Small thing, but "measure, then state" beats "assume, then apologize".

One more bug worth confessing: the first probe returned "no encoder found" even though AV1 demonstrably worked. Cause: subprocess was imported inside the calling function but not inside the probe, and a blanket except Exception swallowed the NameError for every candidate. A silent fallback chain can hide the one bug that makes every option "fail". Blanket excepts deserve the same suspicion as silent catches in any language.

Assembling with stdlib-grade tools

PIL builds the GIFs (adaptive palette, 24fps timing) and the sprite sheets (every 2nd frame in a 4-column grid). ffmpeg composites the transparent frames onto the dark background for video, because yuv420p has no alpha channel. The transparent originals ship too, so buyers can recomposite onto anything.

What we'd do differently

• Two subpaths in one d attribute (the search icon) draw sequentially

rather than in parallel - fine at 24fps, but per-subpath timing would look richer.

• The hold segment could be shortened adaptively for simple glyphs (minus,

plus) where a long hold feels static.

Where it lives

The pack is "Interface Motion - 16 animated stroke icons"; every artefact described above is in the download, including the frames, so buyers can re-edit the timing. Catalogue and previews: <https://aefristore.web.app>

The same build box also produced a single-file offline invoice generator (live paper-sheet preview, print-to-PDF) - the two now ship together in the Everything Bundle.