
CSS in City
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
Continue reading on Dev.to Webdev
Opens in a new tab




