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%
);
}
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: