This August I’m making a CSS drawing a day

Day #12: Set of 25 Stabilo fineliners ; Day #6: Smartphone ; Day #7 Gradient grid inspired by the “I love Hue” game ; Day #7: Emoji’s cradle

Every year in August, Paris and its suburbs is deserted by its residents. The habitual busy pace is nowhere to be seen. While bakeries, restaurants and small shops take their annual leave, parks, museums and other touristic places are much more crowded. Locals temporarily lend the place to the tourists and the city feels so much different, quieter, more relaxed.

Even if I didn’t take my summer leave in August, the activity at the office has also sightly decelerated. I guess this makes the perfect occasion to work on some personal side projects.

I got inspired by the #100DaysOfCode challenge and decided to go with it, but for a shorter period. My goal: to code a CSS drawing or animation each day for the whole month of August.
I’m only half of it, but here what I already wanted to share.

The “blank page syndrome”.

I think making small CSS drawing and animations is a bit like doodling: it comes naturally and easily to some people but others quickly suffer from the blank page syndrome. Unfortunately, I fall on that second category. 
The first couple of days, I got stuck many times thinking “what should I do now?”. I don’t want to simply copy-paste what I’ve seen elsewhere but I admit that I lack a bit in term of creativity.

Planning ahead helps a lot. Taking the time to look around me, browse the web or simply run through the apps of my smartphone gave me some ideas. And for each idea, I made sure to draw a quick draft on a small notebook.

I won’t code them all, but the more ideas, the easier it gets to find new ones.

Coding takes time.

It takes me between one and three hours to complete a module. Coding does take time. Because this is a daily project, the hardest part is to stay consistent and beat procrastination.

Here too, planning ahead helps a lot. Being able to code as soon as I get in front of my computer instead of staring at it thinking “what would be cool to do?” saved me many hours. Also, having several drafts in stock allows me to choose one accordingly to the quantity of time I’m left with.

I cheated a bit though. The days I had extra time, I would go forward and make one (or even two) module in advance. I can already predict that, on some days, I won’t be able to code at all but I really want to keep on releasing a drawing or animation a day. This obviously contradict the “be consistent” principle. I guess I just need to work a bit more on that part 😄.

Thinking out of the box.

Drawing in pure CSS is challenging. We don’t have all the tools that are very convenient when using SVG, Canvas or Javascript.

You really need to think out of the box to find new ways of using basic CSS properties and selectors: :before, :after, :target, box-shadow, border-radius, background. They all can be very handy to draw shapes that are not squares or rectangles.

This is also the perfect time to rediscover all the less known CSS properties: we know they exist, we also may even have used them occasionally, but we just never got the chance to go further.

We can do all kind of gradients and shapes with the CSS functions linear-gradient() and radial-gradient().
Creating mask with clip-path, mask, mask-border, and their functions url(), polygon(), circle() is very convenient as it works similarly to SVG (but be careful with clipping and masking as they also affect the children of the targeted element).
Adding filters to photos (or shapes) never got easier with the CSS functions blur(), saturate(), brightness(), contrast(), … .
And working with 3D is (almost) a piece of cake thanks to the transform and perspective properties and their functions rotate(), translate(), skew(), ….

Day #3 — CSS version of the Instagram logo and generation of a few photo filters

On day #3, to recreate the Instagram logo, I used 2 different gradients as background. The first one is a radial gradient that is positioned on the top left corner ; it starts with an indigo blue then slightly goes purple before going completely transparent to fade in the second gradient underneath. The second gradient is also radial but this time the heart is positioned on the bottom left corner ; it starts from a light yellow and ends with a bright pink.

Curves are hard to make in CSS.

In term of shapes, we are pretty limited when we only use CSS to draw things.

Drawing circles and ellipses is as easy as drawing squares and rectangles thanks to the border-radius, radial-gradient(), clip-path:ellipse() and clip-path:circle() properties and functions.

Drawing triangles needs a tad more effort as you need to find the right configuration of the border property. However, there are plenty of generators available on the web. My favorite:

Other kind of polygons can be made with a smart mix of border and border-radius properties. This demo page on CSS-trick is full of good examples :
Or you can simply use the new clip-path:polygon() property. In that case, Bennett Feely generator “Clippy” is very handy:

Now, if you need to draw curved lines or shapes (ie. other than ellipses or moon-like shapes), that’s a whole different story. Unfortunately, there is still no “Bézier-curves” function nor “twist” transformation in CSS, and the only math function available is calc() — unless you use a preprocessor like SASS or LESS.

Day #8 — These waves are made with a repetition of 2 circles: a full circle and an empty one with a solid shadow.

Simple patterns like arched lines or moon-like shape can be done by playing with ellipses and borders. For example, on day #8, to achieve a wave effect, I used the repetition of 2 circles: one is a colored circle, the following one is a transparent circle with a solid colored shadow.

To achieve more complex curves, the easiest choice is to switch to SVG or Canvas. Otherwise, you’ll need to find a way to use all kind of circle and ellipses to build your ending shape or use clip-path:polygon() with a lot of point to give a smooth effect.

The past two weeks, I mostly worked on drawing flat objects and adding simple movement to them. For the rest of the month, I plan to do more animations, 3D and isometric illustrations.

If you want to take a look to what I code up till now, you can find all my CSS modules on Codepen. You can also find me on Twitter!