The Simpsons in CSS

This post is going to be a little bit of showing off (sorry 😅). It is a personal project that I did over 2 years ago –before joining DEV–, and that CSS {IRL} reminded me about today.

It is a collection of drawings of The Simpsons characters done in CSS. I learned a lot coding them, and I've learned even more since... so I'm scared of looking at my own code now.

Here are some of the drawings (there are 10 in total):

Bart Simpson

This was the first one I did for a CodePen challenge with the colors red, blue, and yellow, which reminded me of Bart.

Homer Simpson

Lisa Simpson

Marge Simpson

Kang

Probably my favorite.

Sideshow Bob

From this one, I really like that the whole hair is a single element... with a ton of box-shadow.

Homer Simpson with circles

This one was also for a CodePen challenge, and I even wrote an article on DEV explaining how it was done. But it is cooler to see it on this animation.

I also have a drawing of Troy McClure (you may remember him from that CSS drawing 🙃) and Itchy & Scratchy.

---

If you liked these CSS drawings, don't miss the CSS illustrations I did last year as part of a 100-day challenge!

Comments

[Breno Farias Fonseca]

Well done! Just out of curiosity, on average how long to make a drawing like this?

[Alvaro Montoro]

Thanks! Each cartoon took around 4-6 hours.

[Josh]

These are really impressive, but why is nobody talking about the huge bruise on Kang's forehead?

I mean it just seems painful

[Aleksandr Hovhannisyan]

From this one, I really like that the whole hair is a single element... with a ton of box-shadow.

That's insane! Great drawings as usual.

[Usman Khalil]

You never fail to amaze me. Loved your previous works, loved this one.

[Alvaro Montoro]

Thanks! I appreciate it.

[Lars Gyrup Brink Nielsen]

Well done! 👏

[Alvaro Montoro]

Thanks! 😊

[Temani Afif]

nah! all of them are embeded images ... inspecting the code ... 🤯🤯
I think I won't be surprised if you do a full simpson episode using only CSS .. you already have all the cast 😋

[Alvaro Montoro]

I want to do a "short film" in HTML+CSS, but I lack the technical knowledge and skills for the animations... maybe one day...

[Temani Afif]

I think you can start with easy stuff like having the characters on a fixed position and a bubble over them with a text typing animation and you move their mouth slightly to simulate a discussion. This should be easy since you already made the difficult part and I'd imagine it will give a good rendring. Still not a film but can produce amazing scenes

[Alvaro Montoro]

That's a good possibility. Maybe just animate squares at the beginning and add shapes little by little.