My Favorite Halloween Pens

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.

See the Pen Halloween Pen by Zane Riley (@zaneriley) on CodePen.

I love that everything about Steve Gardner’s infinite randomized ghosts are generated in JavaScript, right down to the SVG path data that draws them.

See the Pen SVG Ghosts by Steve Gardner (@steveg3003) on CodePen.

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.

See the Pen ghost by Helen V. Holmes (@helenvholmes) on CodePen.

Amazing color palette on this one by Michael Zhigulin, that is entirely CSS drawing.

See the Pen Vampire and Pumpkins on Pure CSS by Michael Zhigulin (@michael-zhigulin) on CodePen.

Maybe I’m just a sucker for programmatically drawn characters.

See the Pen graveyard by jagarikin (@jagarikin) on CodePen.

The fixed-position-esqe bottom edge of this tiny ghoul’s shawl is what makes it for me.

See the Pen Little Halloween by Mohan Khadka (@khadkamhn) on CodePen.

The Sass mixins on this cute little bat by Bri Suffety look like they made this easier.

See the Pen Sona the Bat, created with CSS by Bri Suffety (@brisuffety) on CodePen.

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”).

See the Pen SVG Path Animation by Ali Klein (@AliKlein) on CodePen.

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.

See the Pen Day of the Dead – CSS Sugar Skull by Anders Schmidt Hansen (@andersschmidt) on CodePen.

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.

See the Pen Bat Pixel Art Animation on one Div by Tim Guo (@timothyguo) on CodePen.

Why not get a little spooky with UI?!

See the Pen spooky to do list by danferth (@danferth) on CodePen.

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.

See the Pen Halloween Ghost button by Robin (@lessthanthree) on CodePen.

Canvas PLUS gooey SVG filters? Genius, Mai El-Awini.

See the Pen Witch’s Brew by Mai El-Awini (@maicodes) on CodePen.