clock menu more-arrow no yes

Filed under:

Programmer shuns images, recreates intricate London subway map from pure web code

New, 55 comments
css tube map screenshot
css tube map screenshot

Freelance web developer John Galantini has recreated Harry Beck's iconic London Underground map using HTML, CSS, and JavaScript. The CSS Tube Map was created as a non-profit project to celebrate the sesquicentennial anniversary of the London Underground. Not a single image was used for the design: every symbol, line, circle, and box was created programmatically. Galantini writes that "all the symbols have been recreated using HTML entities, styled and arranged by CSS." Every line is its own unordered list containing station names and items that Galantini then positioned absolutely onscreen using CSS.

The imageless map looks almost identical to the official one provided by Transport for London, and is the result of almost 120 hours work over five weeks. Previously Galantini recreated another of the UK's most famous entities — Doctor Who's TARDIS. The map is best viewed on browsers that use the WebKit rendering engine (Internet Explorer won't display it correctly).