CSS art or: How, at 32, I finally learned how to draw

I want to open this article with a confession. My name is Maya, I'm 32 years old, and I can't draw. At all.

Fun fact: I'm so bad at drawing that at the beginning of the COVID-19 lockdown, when everyone was playing Draw Something, I started a dedicated channel in the office Slack for sharing my shockingly-bad paintings, all for the purpose of raising morale. In other words, "We may be housebound, but at least we can draw a house."

All in all, I felt just fine with this particular flaw. We all have our strengths and weaknesses, and I have no complaints about mine. But then I discovered CSS art.

CSS art is the art of drawing on an HTML page using colored boxes. It has been around for years, So I don't know why I only just discovered it! From the moment it happened, however, I started seeing CSS paintings everywhere. On Twitter, Facebook, and everywhere in between, I saw cute, impressive, sophisticated, and sometimes just plain silly drawings.

The reason I got so excited about CSS art was that in addition to being beautiful, it spoke my language -- code. When all I have in my hand is a pen and paper, I know nothing good will come of it. But when I can use code, I know I can make amazing things. A painting that can be coded sounded promising.

So, I decided to look into the subject. Was it possible? Would CSS art allow me to make something cute that I can look at proudly, knowing I created it (other than my son, of course)?

Ready to explore!

Photo by Katya Austin on Unsplash

It’s worth mentioning that my personal history with CSS is a bit complicated. I’m a BackEnd developer, and I am not particularly artistic. So, even when I do write a front-end feature, I always leave the design part to someone else. A few years ago, a friend who is an amazing frontend developer took pity on me and made me a cheat sheet. It was a collection of basic explanations about the different elements of CSS and how they relate to each other. That was the first step toward becoming a little less afraid of CSS.

Two years ago, my friend Daniella and I built a WordPress site for a nonprofit organization. When we started dividing the work between us, I aimed to avoid any CSS work, as usual, and leave the job for the real expert. Luckily, Daniella convinced me this would be a great opportunity to experiment and learn more. I can't say I became a CSS master by the end of the project, but I definitely learned to enjoy the web page design process, which included moving elements, playing with colors, and obsessing over precision, distances, and margins.
Thanks to that project, when I decided to create a blog for myself, I chose to do so on the WordPress platform. I wanted to control the look of my blog and be able to change its design as I saw fit. And indeed, it’s an ability of which I take advantage frequently.

To sum it up, my knowledge of CSS is basic, but I'm not afraid of it anymore. In my experience, this is all it takes to start using new technology.

So, how do you get started?

One evening, I sat down at my computer and looked for a beginner's guide to help me into the world of CSS art. After a bit of searching, I found this course. I only did the first lesson, but I was impressed with it. This is a light hatred and friendly course, and it’s suitable for complete novices.

I started watching the tutorial video, and at the same time, created a new codepen project and started to work on my own drawing. The tutorial in the video uses a basic drawing of a panda as a demonstration. Since I wanted to create something unique, I chose to draw something else. After a quick mental search of all the cute animals I knew, I chose to do a penguin because its symmetry seemed the easiest to reproduce. I worked through the first lesson and did my painting in about two hours. At the end of the evening, I finished creating the sweet penguin found in the main photo of this post.

The work on the drawing was super fun and exceptionally satisfying. One of the hardest aspects of being a backend developer is that my work doesn’t include immediate feedback. Frontend developers can see tabs and graphs come to life in front of their very eyes. In contrast, backend developers have to settle for knowing the app is extracting information a little differently now or working faster than before. Don't get me wrong, I love my work. I think it’s the best job in the world, but sometimes you just want to write a few lines of code and get a cute penguin in return.

Another amazing element of working on the drawing was to see how moving a few pixels right and left affects the expression of my penguin. A small change in the proportions of the eyes relative to the body turns him from an innocent penguin into an evil monster. Creating CSS art allows you to move elements around and play with proportions until everything falls into place. Plus, you can do this without deletions, without keeping track of multiple layers and without really knowing what you're doing. It's fun.

This little penguin wants to be your friend.
This little penguin is up to no good.
This little penguin doesn't know what's going on.
This little penguin is not even sure he's a penguin.

So, did I convince you that CSS art is worth getting into?

If so, here are the main lessons I’ve learned:

1. Pay attention to the correct placement of elements inside each other, in a way that makes it easy for you to change all related objects at once. For example, in the case of the penguin, the white pupils are elements within the black eyes, so they change in relation to them. When the eyes move, they move with them. It greatly simplifies the creation process, saving you from changing a million elements at a time.
2. Do not obsess over getting every detail just right. It is best to push forward, leaving the final adjustments of the proportions and colors until the end when you’ve got the full picture. At that point, it's much easier to understand what works and what doesn't.
3. All elements in your CSS picture are square or circles. If you see something that looks more complex than that, it's a sign that it combines a few elements. You should think about the basic shapes you want to use in advance and understand how complex they are. For example, my penguin's face looks a bit like a heart. Ambition is good, but you should determine in advance how ambitious the project you chose will be.
4. Just get started and don't be afraid. It's fun and easier than it looks!

And for a cherry on top, here’s an idea for a project.

A few days after I created my penguin, I felt like challenging myself with something a bit more complex. To do this, I chose the beautiful logo of my company: BigPanda.

Working on the logo was significantly more difficult than creating my penguin. The shape of the panda's face is a nine-sided polygon. To build the polygon, I had to combine two triangles and three trapezoids, all created using border manipulation. In retrospect, I discovered there was a much simpler way to create the shape I needed. Despite this, I am glad I did it the hard way, as it allowed me to learn and improve my skills.

My Pure CSS BigPanda Logo

Official BigPanda Logo

When I finished, I thought the final result was beautiful and decided to share it in our office Slack channel (I have the loveliest, most supportive team in the world, so why not enjoy it?).
When Gal, one of my teammates, saw the logo I made, he led me to two very shocking revelations.

First, there is a feature in CSS called clip-path. Using clip-path allows you to create a huge variety of shapes in CSS, which would have saved me about two hours of work. Gal recommended this site he uses for creating clip paths, and I will definitely use it for my next project.

*After checking again, I discovered the clip-path explanation in fact appeared in the last few minutes of the lesson I linked above, and I missed it. Oops! Another important tip is to complete lessons if you want to get all the information.

Secondly, there is a repo of company logos created with pure CSS in GitHub. I think it's a really cool idea. I love it when people create projects that encourage others to be more creative, in turn.

I encourage anyone looking for an idea for an interesting CSS art project to create her company logo and put it in the repo, as there are so many other companies not represented there!

Good luck to everyone, go forth and create!

This post was originally published in my tech blog (Hebrew)!

Read it at https://algoritmim.co.il/2020/06/07/learning-to-draw-with-css-art/.