DEV Community

Cover image for The Wizard of Oz in CSS
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

The Wizard of Oz in CSS

The Wonderful Wizard of Oz is one of the books I have read recently. So I decided to draw the story's main characters in a minimalist/vectorial way, just using 8 colors, HTML, and CSS.

Here's a demo on Codepen:

I tried to keep the drawing simple and to the minimum, so each character only has four sections:

  • Cowardly Lion: mane, face, ears, and nose.
  • Dorothy: face, hair, dress, and hair bows.
  • Scarecrow: hat, face, necktie, and straw.
  • Tin Woodman: hat, face, jaw, and bowtie.

The drawings are done with clip-path, using the polygon() function. So the process was a little bit like carving from a square to the desired shape... which was a small challenge considering I didn't use any editing software to generate them—all by hand (watch the video below).

/* Cowardly Lion's mane */
.lion .mane {
  background: var(--orange);
  clip-path: polygon(
    50% 5%, 73% 8%, 87% 40%, 85% 80%, 70% 95%, 
    65% 93%, 60% 98%, 55% 95%, 50% 100%, 45% 95%, 
    40% 98%, 35% 93%, 30% 95%, 15% 80%, 13% 40%, 27% 8%
  );
}
Enter fullscreen mode Exit fullscreen mode
Example of CSS code from the drawing
 

A small animation completes the drawing: moving the mouse over each character will display what they want to ask the wizard: courage (a star medal), going home (a house), a brain, and a heart, respectively.

The result looks nice. Although I must admit that Dorothy resembles the girl from Wendy's and the Scarecrow, a rocket taking off...

Later, I changed the drawing to make it a little more interactive by replacing the container <div> with links to each of the actors who played the character. You can see that version here.

Overall, the whole drawing process took around an hour and a half. Here's a video of how it went:

Top comments (9)

Collapse
 
tamb profile image
Tamb

@alvaromontoro
You rock so much at this stuff. Any recommendations on courses/tutorials for these types of styles? Maybe SVG courses as well? I'd like to make svg or html/css images what can have color palettes swapped.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thank you!

Many of the things I've learned are not from tutorials/courses but from reading MDN articles and investigating after other developers share something interesting (either demos or articles). Some people who share amazing CSS stuff (demos or information in general) on Twitter: Lea Verou, Jhey Tompkins, Lynn Fisher, Ricardo Oliva Alonso, Miriam Suzanne, Michelle Barker, Sarah Fossheim, Kristopher Van Sant, Ben Evans...

For SVG, check Sarah Drasner's work and tutorials. They are interesting and enlightening. Sara Soueidan has great articles and tutorials for SVG and a great focus on accessibility. Adam Kuhn always shares out-of-this-world SVG/CSS demos. And Cassie Evans is an SVG magician and great at explaining things.

For swapping color palettes, you could use CSS custom properties (aka CSS variables). I'd recommend the article on MDN about it.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I know it's a long list of people, and I know I'm forgetting a long list that does amazing stuff too (meowlivia, Darin Senneff, ilithya...)

Thread Thread
 
afif profile image
Temani Afif • Edited

You forget the best of the best. The real CSS God: Ana Tudor

Collapse
 
tamb profile image
Tamb

Goodness! Thank you so much!

Collapse
 
afif profile image
Temani Afif

Using the "custom polygon" here: bennettfeely.com/clippy/ can help. You place the different points then you drag them until you get the shape you want

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

That's a great tool, but it takes away all the fun from doing it manually :P

Collapse
 
natalia_asteria profile image
Natalia Asteria

It rocks. I will try to learn clip-path, thanks.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!