The Halloween game over on CodePen is pretty strong. I’ve been keeping a Collection of them myself, but so have a lot of other people who put mine to shame. You can even search for Halloween Collections, if you really wanna follow the rabbit hole. Today is the day, so I figured we’d keep the spirit going by picking out some of my very favorites. Some new, some from years past.
To kick it off, how about a welcoming text animation, featuring a cute font and bouncy feel. Zane experimented with some preprocessors to keep some of the code tight, as well as utilized another Pen for help with the procedurally generated stars.
Just the perfect little ghost by Helen V. Holmes. I love it’s cutely placed smirk, chill bounce, and bold background color. The shadow that changes size is the tiny touch that brings it all together.
Amazing color palette on this one by Michael Zhigulin, that is entirely CSS drawing.
Maybe I’m just a sucker for programmatically drawn characters.
The fixed-position-esqe bottom edge of this tiny ghoul’s shawl is what makes it for me.
The Sass mixins on this cute little bat by Bri Suffety look like they made this easier.
Just when I think I’m about getting tired of SVG line drawing animations, I see one that does something special with it. This one by Ali Klein feels rather art directed, with certain areas waiting to burst into place with others waiting for a staggered ending. There is also some helpful looking functions in here for converting different SVG shapes into paths (the only element it’s practical to “draw”).
Or maybe I’m just into “Day of the Dead” stuff after watching the lovely The Book of Life like three times. I know it’s a different holiday, but hey.
The crazy flappy bat is the best. It’s all done with no-blur box-shadow bits, so it’s just a single element. It reminds me of some old video game look that I can’t quite put my finger on.
Why not get a little spooky with UI?!
Creepster is like the official font of Halloween, on account of it being available on Google Fonts, but the gradient Robin applied to it here is so great.
Canvas PLUS gooey SVG filters? Genius, Mai El-Awini.