There are several posts out there around CSS illustrations, but not one I've read so far -correct me if I am wrong-, which talks about the technique I'll share with you today. Creating vector-like CSS illustrations, an approach I use often to create most of my illustrations, making them resizable in a matter of seconds.

vector-like CSS illustrations samples

The story

I joined CodePen in the year 2015, and the first thing I did was experimenting with CSS illustrations. Four years after, I still enjoy exploring and creating pure HTML and CSS illustrations either completely designed by me, or followed by someone else's design.

The main focus of my CSS illustrations is the ability to build such illustrations in a vector-like style.

Ever since I started with some of my first illustrations, I often wanted to create not only an illustration with pure CSS, but also, if possible, make sure it'll be modular, responsive and/or scalable—easy to maintain in the future.

Now, you might be asking yourself, why bother making an illustration modular, responsive and scalable? Well, because it helps me exercise and improve the way I write CSS and semantic HTML, as well as the way I build components.

Planning vector-like CSS illustrations is always an exciting challenge.

The HTML

Beginning with the HTML, I work out my modular and scalable code by creating class names in semantic HTML elements and using a CSS methodology, my favorite is BEM, with a mix of OOCSS and ITCSS for patterns and DRY (Don’t Repeat Yourself).

And mainly, I find myself using pug in CodePen as I write that HTML.

The CSS

The fun part, from illustrating with code, comes when writing the CSS.

To make sure the illustration would be maintainable, I thought not only using global or local variables would be enough. What if in the future whenever one wanted to change the size of the illustration proportionally, one could modify it in a blink of an eye, instead of tweaking each section of the illustration during several minutes or hours. And what if that magic could be achieved by simply updating just 1 variable in the whole CSS styles.

This is when resizable components came to my mind. I was sure, back in 2015, I wasn't the first person thinking of this, as matter of fact, maybe someone else had already applied this method on real production components, and I had no idea.

Then I googled it, and after months of exploring this idea sporadically, I found this amazing article, in 2016, by Ahmad Schadeed: Building Resizeable Components with Relative CSS Units, which pretty much approaches a similar idea, call it technique, to resize all the UI in components, including text, after detailed code examples following an SCSS function that converts px to em proportionally after a given SCSS global size variable.

The SCSS variable

My very first attempt in creating vector-like CSS illustrations started likewise by declaring one size global variable via SCSS, that would be called in later from several selectors. For example, as I drew the Sugar Skull presented below, I declared the following SCSS variable: $calavera-size.

Then, anytime I'd like to resize the finished illustration, I could always come back to that single SCSS variable and place any desired size in pixels: $calavera-size: 500px;.

Needless to say, my code back then could be improved a lot! My patterns, mixins, code organization... Oh well, this is a good opportunity to highlight that practice makes perfect. Ok, maybe not perfect, but better! If I take a look at my CSS illustrations over the years, it is a good sign to see that my code has progressed -i am sure it's the same for you-, and also the time invested into drawing with code.

Media queries vs. SCSS variables

In the past, I was a bit frustrated with this vector-like technique explored so far, because of course I also dreamed of making that illustration responsive, but without adding more work to it.

I wanted to be able to simply resize that SCSS variable inside a media query and say voilà.

Sadly, redefining an SCSS variable, on its own, inside a media query didn't and still won't work. Instead one needs to do something like the following:

  $size_resizable: 600px;

.illustration {
    width: $size_resizable;
}   

@media screen and (min-width: 30em) {
    $size_resizable: 400px;

    .illustration {
        width: $size_resizable;
    }
}

And I did explore further this method, of course. But wasn't satisfied completely with the responsive code for the CSS illustrations. It was still too much work!

Next, you'll find two examples I drew back in 2016 while experimenting with resizing SCSS variables inside media queries. Drunken Watermelon and Matryoshka:

CSS variables

I believe at some point in the year of 2016 -correct me if I am wrong again, please-, CSS variables became native. And of course, yet again, I had to test them with my vector-like CSS illustration style.

Since at the beginning CSS variables browser support wasn't particularly amazing, I started testing only using them for color variables in my illustrations. For size variables, I still declared them via SCSS. However, the code structure and defining dependent SCSS sizing variables from the resizable SCSS variable was improving in this vector-like technique.

Below, you'll find one CSS illustration I drew in 2017, Fight: El Santo, portraying this. Color CSS variables have the syntax: --css_var and sizing SCSS variables this: $scss_var:

Media queries vs. CSS variables

By 2018 browser support for CSS native variables only got better and better, until today -2019-.

I noticed, over those years, more CSS variables experiments were done by other people in CodePen, including complex calculations with calc working pretty decently, that I thought, now it's the time to test further CSS variables for sizing variables. But life happened, and it took me a long time to catch up with it, and update my vector-like CSS illustration style.

Earlier this year, I finally closed the annoying gap that was frustrating me with the responsiveness of my CSS illustrations.

I am happy to announce that my dream finally came true -I am late, I know-. My vector-like CSS illustrations can now be modular, responsive and scalable! They might not be flawless yet. It's a work-in-progress.

CSS variables are pure magic. By declaring one main global CSS size variable, one can easily create dependent CSS size variables to work proportionally, and -the best!- one can resize that CSS variable inside a media query. 

   :root {    
    --size_variable: 80px; 

    @media screen and (min-width: 50em) {
        --size_variable: 140px;
    }
    @media screen and (min-width: 120em) {
        --size_variable: 200px;
    }

    --dependent_variable_01: calc(var(--size_variable) / 2);
    --dependent_variable_02: calc(var(--size_variable) / 10);
}

This means, creating a responsive vector-like illustration is no longer a hassle. And also achievable in a matter of seconds, just like its maintenance in the future, in case it needs resizing or new illustration elements.

Down here you'll find two of the latest vector-like CSS illustrations I created recently in 2019, where CSS variables are used to make the illustrations not only responsive, but also resizable by editing only 1 CSS sizing variable. New Years Balloons and Daria MTV:

Conclusion

Creating responsive vector-like CSS illustrations, easily without much work, is possible thanks to native CSS variables. Just one global CSS size variable and you're ready to go.

  • Do you also build CSS illustrations with a vector-like style?
  • Have any of you already used this vector-like technique, or something similar in real production components?
  • How useful do you think this could be now if applied in let's say a design system?
  • Have you read other posts about vector-like style to build CSS illustrations or components?

I think later this year I'll probably explore the web performance of this technique, as well as applying this vector-like style into components. If I do, I'll share my findings in another post.

If you want to browse all of the vector-like CSS illustrations I've created so far in CodePen, visit one of my tags: tag=resize

If you're curious about my very first CSS illustration in 2015, which in fact it was also my very first pen in CodePen, find it here: Rabbit vs. Cat

If you prefer browsing more illustrations I've created in CodePen, not necessarily pure vector-like, I have three collections:

Thanks for the read.
Hope you enjoyed it. :)

If you have any kind of feedback or opinion on how this vector-like style can continue to evolve, just drop me a comment below.

Happy coding!