Early Access: Hobbitses and Web Development

This year I read The Lord of the Rings and The Hobbit for the first time, and I started watching the movies with my kids (although they are still too little).

This cartoon combines both LOTR and CSS in the funny scene from the movie where Pippin asks about the second breakfast:

• Aragorn: Gentlemen, we do not stop till nightfall.

• Pippin: What about breakfast?

• Aragorn: You've already had it.

• Pippin: We've had one, yes. What about second breakfast?

• Merry: I don't think he knows about second breakfast, Pip.

• Pippin: What about elevenses? Luncheon? Afternoon tea? Dinner? Supper? He knows about them, doesn't he?

• Merry: I wouldn't count on it.

There are a couple of versions of the cartoon, just changing the text, and I was thinking about adding different versions with Sauron and an elf but just limited to these two for now.

I like the simplicity of the code (each hobbit is just three elements: the hair in the back, the body, and the head. And I got to play a little more with CSS filters for the head, which was fun.

Here's a link to a private CodePen with the demo and source code.