CSS Pirate Cartoon

Today I drew a cartoon of a pirate with HTML and CSS:

It may look a bit funky on some browsers because:

1. It uses drop-shadow filter (in the hook, earring, and pegleg), which is not fully supported by browsers like Safari.
2. It uses relative sizes and shadows, and some browsers (looking at you, Chrome) get mixed up and delete the shadows with relative sizes and percentages.

Anyway, it was fun to code this from scratch. It took me a little bit longer than usual, and I wish I had recorded the process... maybe next time.

---

Edit: thanks to @afif for some animations and some fun in the comments (feel free to add an animation in the thread). Now the cartoon has some motion too:

Comments

[Temani Afif]

let's animate this a little : codepen.io/t_afif/pen/dyNBzWK 😛

[Alvaro Montoro]

Let's add some blinking: codepen.io/alvaromontoro/pen/WNRqEXv 😐😑😐
😋

[Temani Afif]

blinking without speaking? no! codepen.io/t_afif/pen/ZELdJxe 😛

[Alvaro Montoro]

it has two arms too! codepen.io/alvaromontoro/pen/gOgNxeJ 😬

[Temani Afif]

haha! we have to stop this or he will leave the screen and slay everyone 😂

[Alvaro Montoro]

I was running out of ideas of things to animate... At this point I was thinking about animating the toes maybe? 😳

[Alvaro Montoro]

The blinking doesn't look that great :S

[Alvaro Montoro]

That is really cool

[Natalia Asteria]

"How many CSS drawings you want to make?"
Alvaro Montoro:

[Habdul Hazeez]

This is amazing.

[Alvaro Montoro]

Thank you

[Chittoji Murali Sree Krishna]

Why shinchan became a pirate 🤔

[Liz Laffitte]

Incredible!

[Alvaro Montoro]

Thanks! 🙂

[Rajesh Royal]

Sir you got amazing skills in CSS. 🙏🙏