Every transit map in the world, no matter how complex, is made of the same two primitives: stations and the lines between them. Let's start with the smallest possible metro — one line connecting two stations.

An SVG element is our canvas. Inside it, we need exactly three things: a line connecting two points, and a circle at each end. That's it. That's a metro map.

That amber line with two white circles is — structurally — identical to any segment on any metro map in the world. A track, two stops. Everything else we'll build in this guide is repetition and refinement of this pattern.

Try editing the code on the left. Change the station positions. Change the color. Make the line thicker. Move a station off-center. You'll notice something immediately: the line doesn't follow the stations. The <line> coordinates and the <circle> coordinates are independent. If you move a station, you need to move the line endpoint too.

That's our first lesson: in a hand-coded SVG, everything is manual. We need to start generating from data.

From Coordinates to Code

Instead of writing SVG by hand, let's define our stations as data and generate the drawing. Here's the simplest possible data model: an array of stations, each with a name and a position.

Now the code and the visual are connected. Try adding a third station — just add another object to the stations array. The track and label generate automatically.

The Vocabulary

Before we go further, let's name the things we're working with. These terms will be consistent throughout the guide:

A station is a point on the map where passengers board or exit. Visually, it's a circle or a pill-shaped marker. In our data, it's an { id, name, x, y }.

A segment is the track between two consecutive stations. Visually, it's a line or curve. In our data, it's just "station A connects to station B."

A line (or route) is a named, colored path through a sequence of stations. "Line 1" might go through stations A → B → C → D. It has a color (amber, pink, cyan) and a name.

A network is the complete set of lines and stations. That's what we're ultimately drawing.

Drawing Order Matters

Notice that in our code, we draw tracks first, then stations on top. SVG renders in document order — later elements cover earlier ones. If we drew stations first and tracks second, the lines would cut through the station circles.

This layering will become critical as our maps get more complex. Here's the order we'll always use:

1. Line tracks (back layer)
2. Station nodes (middle layer)
3. Labels (front layer)
4. Animated elements like trains (topmost layer)

The Color Question

Every transit system assigns colors to its lines. These aren't arbitrary — they're part of the wayfinding system, printed on physical signs, painted on trains, embedded in cultural memory. When we render a transit map, the colors aren't decoration. They're data.

In our code, line color is a property of the line, not of the segment or station. A station served by multiple lines doesn't have "a color" — it has all of them. We'll deal with this complexity in Chapter 4. For now, one line, one color.

That last example sneaks in a preview of things to come — the dark background and the glow filter hint at the neon aesthetic we'll build in Chapter 9. But the structure is still the same: two stations, one line, connected by a track.

In the next chapter, we'll extend this to a proper line with five stations and learn how spacing and label placement work. The data model stays the same — we just add more dots.