The Pattern Atlas is a single HTML reference page covering all 17 classic Gang-of-Four design patterns you listed, grouped into the same three categories: Creational (Singleton, Factory Method, Abstract Factory, Builder, Prototype), Structural (Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Proxy), and Behavioral (Observer, Strategy, Command, State, Iterator). Each pattern gets its own card with three parts: a one-line explanation of the mechanism, a custom SVG "circuit schematic" diagram that visually represents how that specific pattern works (using a consistent visual language — chips for classes, dashed outlines for abstract types, bright green traces for the call that actually fires, pin marks for interface boundaries), and a full TypeScript implementation in a syntax-highlighted, copyable code panel.

The code isn't just illustrative — every one of the 17 files was compiled under strict TypeScript with zero errors and actually executed to verify its output, including deliberate edge cases (a Singleton blocking a runtime bypass attempt, Composite rejecting a self-containment cycle, Flyweight proving 10,000 objects share only 2 underlying instances, State blocking an illegal transition, etc.), which is flagged on each card with "verified" badges. Visually, the three categories are color-coded (amber/teal/magenta) against a dark technical backdrop, with a legend explaining the diagram symbols, a sticky nav for jumping between sections, and a layout that adapts down to mobile.