Unofficial Map: London Underground Map Recreated Entirely in CSS
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)
Fifty years ago, Jerry Gretzinger began to draw a map. He’s still drawing it, having let it grow in the intervening decades to an astounding 2,600 panels covering 2,000 square feet. Current population of the map: 16,304,885 in 27 parishes and 416 cities.
Gretzinger talks about his work in an excellent short documentary. Source.
Map of C++ [3873 x 2701]