CodeNewbie Community 🌱

Cover image for The Wizard of Oz in CSS
Álvaro Montoro
Álvaro 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:

Oldest comments (2)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Loving this! I like the animation aspect too — it shows what each of them has on the mind haha!

Collapse
 
harry49335 profile image
harry49335 • Edited

I recently drew characters from The Wonderful Wizard of Oz using only HTML, CSS, and 8 colors. The minimalist design includes animations and links to the actors who played each character.

If you're into Actors News like ina müller schlaganfall, you'll love exploring the connections between these iconic characters and the talented stars who brought them to life. Check it out!