CSS in City

#showdev #css #webdev

Created using zero HTML tags or images

The illustration of the city above is all CSS. There are no images, no SVG, no JavaScript... there isn’t even any HTML!*

Here’s the source code on CodePen:

(Click on the 1x, 0.5x, and 0.25x buttons to zoom in or out and see more of the illustration. Alternatively, you can also visit the CodePen details page, where you can zoom in/out and resize the window for better results)

You may ask “how did you do it?” And the answer will be “with a lot of patience.” I started this CSS Art two years ago, and worked adding small things little by little: a building here, some tree there, a bus stop close by... But, due to personal and professional reasons, I stopped adding things around a year ago, and haven’t touched the code since. I’d love to expand it into a full city someday.

Basically, it is all a big collection of CSS gradients: radial, linear, conic... I event used the repeating ones. All of them sized and positioned so they fit within a particular spot in the illustration.

This drawing is different from other CSS Art I usually do. I tend to do small things that are responsive, but this is an infinite drawing and it uses absolute units.

It is infinite because it doesn’t matter how much you resize, the illustration just goes on and on. This was achieved by playing with background sizes and positioning, so the same elements repeat ad infinitum. Examples of these elements are:

The bricks on the wall
The tree tops behind the wall
The grayed buildings in the very background
The park houses

The absolute units are pixels, and I used that instead of vmin or em, to make sure that all the things will fall exactly in the place I wanted them to be. When using relative units, sometimes something will fall in a half a pixel position and the result looks off.

When drawing and adding elements, I started from the bottom center of the image, and position everything based on that point, growing from there upwards and sideways.

I added some basic animations (but commented them for performance while coding, you can uncomment the code, but it’s not much), so the traffic light actually works, the water in the fountain flows (poorly) or some of the lights flicker. I considered adding a car that stops at the traffic light and an UFO that flies above the city –that won’t be seen unless you zoom out considerably or have a large/tall screen.

And all this using just the :root element. I could still use the ::before or ::after pseudo-elements to do add more things. In particular, animated things. But I dropped the idea because adding them caused the performance to drop considerably. Still, I would like to continue adding more things when I have time.

What do you think? Have you ever done a single div CSS Art?

*The CodePen demo may not show any HTML, but it automatically adds a structure that is hidden from view but can be seen reviewing the source code. There is a way to run CSS on the browser without the need to import it from HTML. Unfortunately, it requires updating some settings in the web server, and only one browser supported it last time I checked (Firefox). If we did this, the illustration would be completely CSS only.

Top comments (4)

Jonathan Murray • Apr 4

CSS-only illustrations occupy an interesting niche — they require the same spatial reasoning as visual art but constrained by a very specific grammar. The fact that you're building a city with gradients specifically (rather than border tricks or clip-paths) suggests a particular patience for layering that most CSS artists avoid because gradients compound in visual complexity much faster than they do in other approaches.

The technical question that always interests me with projects like this: at what point do the property values become so interdependent that changing one thing breaks the composition? In traditional illustration you can nudge a building without recalculating everything behind it. In CSS the answer depends heavily on how much you've leaned on absolute positioning vs something more compositionally forgiving. Does the source order in the stylesheet effectively function as your z-index layering system here?