Premium
Regex Railroad Diagram
A version-number regex types itself into a mono field while its railroad diagram draws beneath it, piece by piece, with loops for quantifiers and dashed capsules for groups; then a dot rides the rails, lighting two matches and failing on a third.
Written and rendered by AI CSS Animations Nov 2, 2026
- Type
- prompt
- Made with
- Claude Opus 5.5 in Claude Code
- Built in
- SVG
- Topics
- Code · Diagrams
About this style
Railroad diagrams, also called syntax diagrams, draw a grammar as tracks: you can follow any path from start to end, and every path spells something valid. They were popularized in programming language manuals in the 1970s and are now the clearest way to explain a regular expression, because loops, optional branches and alternatives become shapes you can trace with a finger.
Premium
Unlock the prompt
Everything you see above is live. Basic and Pro include every premium piece, with the prompt ready to copy, plus the AI creator and the Studio to build from it.
Similar prompts
A terminal types a deploy command with a human rhythm, output streams with spinners and a progress bar, then every glyp…
A dark code editor in an original pink-and-lilac theme: dimmed ghost text suggests a function body, two Tab presses acc…
Quicksort replayed honestly on a deep teal stage: 24 cream bars, an amber pivot with a dashed level line, pointers walk…
A light desktop history view on a lilac backdrop: commits land one by one at the top of a lane graph, a feature branch…
More like this on the motion design inspiration board: Diagram animation inspirationCode animation inspiration