Even though I’m mainly a print designer, I’ve done enough web design work to know how fiddly (yet also powerful) Cascading Style Sheets (CSS) can be. That’s why I’m totally in awe of this incredibly accurate rendition of the Tube Map, created with nothing but code by John Galatini. Not one image file to be seen! Johnston Sans is recreated with a web font, while the symbols for accessibility, National Rail, ferries, the Emirates Airline, etc. seen on the map are all “drawn” completely with CSS code. John estimates that the project took around 120 hours to complete, and I can believe him!

While the project’s website gives some great technical information on how the map was achieved, I prefer John’s own description on Twitter:

“It’s basically lots of rectangles and squares, lots of border-radius (to create circles) and a shit load of css rotation.”

Our rating: An astounding example of what CSS can do. Five stars!

Source: CSS Tube website – link no longer active