Why would you do that in CSS?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

And by that, it’s usually some kind of CSS experiment, often an elaborate drawing or interaction.

For example, have you seen Lynn Fisher’s extraordinary A Single Div project? Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single <div>.

Why would she do that? Here’s one pertinent possibility: it’s none of our business. We’re free to wonder, or even ask if it’s done respectfully enough. But does it really matter? Let’s stop short of assuming she doesn’t know what’s she’s doing, assuming it’s a twisted form of pain, or that she’s unaware of other technologies. Check out the example where she drew the official SVG logo with CSS and a single div. Woke.

A screenshot of the official SVG logo recreated using a single element in CSS on a yellow background.

I even kinda get it. I wrote a whole book about SVG because I think it’s underused. Are there “CSS drawings” that I think would be better as SVG for a production site meant to last? Sure.

How about this one?

Jeepers creepers that’s something else. I would have guessed GreenSock was behind this at a quick glance. Speaking of, GreenSock has advocated right here on CSS-Tricks some techniques for smart animations. Part of that is breaking animations into parts and stitching them together into larger timelines for maintenance ease and “without getting bogged down by the process.”

So, did Julia Muzafarova do it wrong? Of course not. If there is a wrong way to animate a cartoon hipster on a bike in this world, I don’t wanna live here anymore. It’s 2,100 lines of meticulous positioning, coloring, and animating. Heck, it’ll work in some email clients if you really need to latch onto something “practical.”

Sasha Tran, a UI Developer at Level Studios, shared her story of creating drawings in CSS last year. She drew something new every day for 20 days during Codevember.

Even if I am not talented in hand illustrations, there is a way to express myself through other mediums. I found that medium to be in HTML and CSS. To level up and get to a point where I could create cute artwork, I focused on two things: the basics, and consistency. Working with basic CSS shapes like rectangles and basic properties like border-radius overtime gave me the muscle memory to progress into more intricate illustrations.

Significantly leveled up in a month and developed better CSS muscle memory. Huh. Speaking of shapes, there are plenty of ways to get tricky with those in CSS!

You could argue that pushing boundaries toward the impractical is what hones our skills for all that other work we have to do.

You could argue that forcing yourself into restrictions is fuel for creativity.

You could argue that stretching your brain creatively in these forced conditions helps build your confidence and widens your toolbox.

You could argue that it’s just kinda fun.