Polygonal portraits of a lion, a girl, a scarecrow, and a tin woodman.

Drawing The Wizard of Oz characters 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).

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:

Originally published at https://alvaromontoro.com on April 9, 2021.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store