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:
Oldest comments (1)
Loving this! I like the animation aspect too — it shows what each of them has on the mind haha!