Eleven chapters. Stations and segments. Bezier curves. Parallel offsets. Station pills. Junction patterns. GTFS parsing. Neon glow. Animated trains. Every concept, every function, every technique — converging into one interactive map.

This is Metro Lumina, complete. Five lines, twenty stations, animated trains, occupancy colors, pulse effects, and line filtering. Click the line buttons below the map to toggle visibility — filtered lines fade to near-invisible, their trains disappear, and only their shared stations stay lit.

Every element on this map was built step by step through the guide. There's no magic here — just the accumulation of simple pieces. Let's review what's happening under the hood.

The Architecture

The map has six layers, drawn back to front:

Layer 0: Grid — subtle background lines at 6% opacity, creating depth.
Layer 1: Line paths — the colored tracks with glow filter. Muted lines at 12% opacity.
Layer 2: Station markers — dots, pills, and transfer indicators. Partially-active stations (shared between active and muted lines) stay visible.
Layer 3: Labels — station names. Hidden for muted-only stations.
Layer 4: Trains — animated dots moving along active lines. Color indicates occupancy.
Layer 5: Pulses — breathing rings around major interchange stations.

The Filtering

When you toggle a line off, three things happen:

1. The line's path drops to 12% opacity, glow filter removed. It becomes a ghost — you can still see the network structure, but the line isn't visually active.
2. Trains on that line disappear.
3. Stations are re-evaluated. A station served only by muted lines fades out. A station that still has at least one active line stays fully visible.

This "partial muting" of shared stations is key — without it, disabling L1 would hide Central (which also serves L2, L3, and L4), breaking the visual continuity of the active lines.

The Rendering Budget

This full map with animations renders comfortably because of a few performance choices:

One glow filter for all lines. Applied to a <g> group, not per-path. One filter pass instead of five.
SVG animateMotion for trains. Browser-native animation, no JavaScript loop needed for the basic motion.
Pulse animations via SVG animate. Zero JavaScript overhead — the browser's SVG engine handles them.
Re-render only on filter change. The map doesn't redraw every frame. Filter toggles trigger a single re-render of the affected elements.

Beyond This Map

Metro Lumina is a teaching tool — a fictional network designed to demonstrate every concept. But the system behind it is real. The same code, fed different data, renders any transit network:

Overlay on a real city map. Use Leaflet or Mapbox GL as a base layer, render the SVG as an overlay. Convert lat/lng to pixel coordinates using the map's projection. The rendering engine doesn't care whether positions come from a schematic layout or a geographic projection.

Connect to live data. Replace the simulated trains with real-time API data. The animation technique from Chapter 10 (Level 3) maps ETA data to path positions. The departure board updates from the same feed.

Add incident overlays. When a service alert comes in, highlight the affected line segments in red, pulse the affected stations, and show an alert banner. The visual language is already established — red for problems, amber for warnings.

The foundation is done. Everything from here is data and design choices.