Drawing a snowman in CSS… with no HTML elements!

The snowman from the image was drawn in CSS, without using JavaScript or HTML, as you can see in the following snippet:

What is that HTML code?

And here you can see a video of the drawing being coded step by step just using CSS (explanation of how it was done at the end of this post):

Time-lapse of the process

But what type of witchcraft is this? How is it possible?

Web development sometimes feels like magic

Obviously, there’s a trick. Codepen and other online editors, don’t show the basic structure of the document that the user is editing. The written HTML code is then wrapped in something like this:

In the snippet itself, there’s nothing in the HTML or JavaScript boxes, which makes it look like there’s no other code but CSS, but the code above (or something similar) is auto-generated to run.

Because it looks like there’s no HTML, some people call this type of CSS drawings a zero-element or no-div drawing… but truly there is an element: the (or the in the case of the snowman).

Mystery solved.

How it was done

As it can be seen in the video above, we used 3 elements for this drawing: the tag, and its and pseudo-elements.

The tag was used to generate the snowy background (we even added a small animation). It is all a bunch of different sized circles generated with , and positioned all over the place using the diverse properties of .

For the body of the snowman, we used the . We made it into a circle using that will be the left eye. Then used to create more circles of different sizes:

  • the other eye,
  • the nose,
  • the head,
  • the buttons in the middle section,
  • the middle section,
  • the bottom section,
  • some shadows between the different parts.

For one of the buttons, we used two circles so it would not look exactly like a circle. This was on purpose to break a little bit the symmetry of the cartoon.

For the shadows between the different sections of our snowman, we added with a little bit of a blur.

Finally, with the we made a transparent rectangle that covered the whole snowman. And tiltet it a little bit (again, to break the symmetry).

With three s we generated the hat. And then used multiple to create the arms, hands, and broom.

Et voilà ! Our snowman is complete!

Originally published at https://dev.to on December 6, 2020.

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro