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 (0)