Our transit map is functionally complete. It has parallel lines, smooth curves, proper station markers, junction handling, and a data pipeline from GTFS. But it looks like a technical diagram. It doesn't feel like anything. In this chapter, we give it soul.

The transformation uses three techniques: SVG filters for glow effects, color treatment for neon intensity, and CSS animation for living, breathing stations. The data doesn't change. The rendering functions don't change. We only change how the output looks.

Before and After

Let's start with the impact. Toggle between "clean" and "neon" — it's the same map:

Same stations. Same lines. Same rendering logic. The only change is a theme object that controls colors, filters, and animations. The toggle swaps themes — the entire visual identity changes without touching the engine.

Technique 1: SVG Filters for Glow

The neon glow is an SVG filter — a post-processing effect applied to elements after they're drawn. The filter blurs a copy of the element and composites it behind the original:

<filter id="glow">
  <feGaussianBlur stdDeviation="3" result="b1"/> — tight glow
  <feGaussianBlur stdDeviation="7" result="b2"/> — wide ambient glow
  <feMerge> — stack: wide blur + tight blur + original sharp
</filter>

Applied via filter="url(#glow)" on any SVG element. The blur radiates the element's color outward, creating the neon tube effect. Two blur passes at different radii give depth — a tight bright core and a wider diffuse aura.

Technique 2: Color for Neon

The "clean" theme uses muted, print-friendly colors (dark amber, deep pink). The "neon" theme uses the same hues but brighter and more saturated. The difference:

Drag the slider. At 0, no glow — flat colored lines. At 3-4, the sweet spot — visible aura without overpowering the line. At 8+, the glow dominates and individual lines blur together. At 12, it's a neon soup.

The right value depends on context. A dashboard showing real-time data benefits from more restraint (2-3px). A showcase or hero image can go bigger (4-6px). An art print can go wild.

Technique 3: Station Pulse

A static map shows infrastructure. An animated map shows a living system. The simplest animation that transforms perception: a pulsing ring around major stations.

Two concentric pulse rings per station, at slightly different speeds, create an organic "sonar ping" effect. The key details: stagger the timing (dur) between stations so they don't pulse in lockstep — synchronized pulsing looks mechanical, staggered pulsing looks alive.

These are native SVG <animate> elements — no JavaScript needed, no requestAnimationFrame. The browser's SVG animation engine handles them natively, which means zero CPU overhead from our code.

Technique 4: The Grid

The subtle grid lines in the neon version aren't decoration — they add depth and context. They suggest a coordinate system, a control room, a technical environment. Six lines of SVG, faded to near-invisibility:

opacity="0.06" — barely visible, but enough to create texture. Without the grid, the dark background is a flat void. With it, there's a sense of space and structure.

Technique 5: Scanlines (Bonus)

For an even more retro-futuristic feel, CSS can overlay horizontal scanlines using a repeating gradient:

Scanlines and a vignette (darkened edges). It's a CRT monitor effect — completely optional, arguably excessive, but it demonstrates how far you can push SVG without leaving the format. The scanline is an SVG <pattern> of tiny semi-transparent rectangles, tiled across the entire viewport. The vignette is a radial gradient from transparent to the background color.

What We've Learned

Data visualization is design. The same data, rendered with different treatments, communicates different things. A clean map says "this is infrastructure." A neon map says "this is alive." Neither is objectively better — they serve different purposes.

The techniques: SVG <filter> for glow (two Gaussian blurs merged with the original), neon color palettes (same hues, higher saturation and brightness), SVG <animate> for station pulses (staggered timing), background grid for depth, and optional scanline patterns for retro atmosphere.

All of it layered on top of the unchanged rendering engine. Next: we make the trains move.