Screenshot of Andrew Hawkes' SCSS random() Christmas Tree Codepen

Five Codepens to get into the holiday spirit

It’s getting close to Christmas, when people start to think about the past and the future, curled up on their sofas with a laptop and a hot drink.

It’s also a great time to pick up a new bit of code, whether you’re making a virtual card to send to your family, want to learn a neat trick to show off when you get back to work, or just want to take the chance to play around with HTML and CSS.

I love going through Codepen and seeing what people come up with.  Here are five that I found with the holiday season in mind.

CSS Falling Snow by Justin Patrick Schwinghamer

See the Pen CSS Falling Snow by Justin Patrick Schwinghamer (@jpschwinghamer) on CodePen.

A slow and soothing snowfall powered entirely by CSS. I suppose you could make it go faster, but then you lose the lovely effect of gently falling snow against your background.

Santa Stop Here! By Chris Gannon

See the Pen Santa Stop Here! by Chris Gannon (@chrisgannon) on CodePen.

Looking for the perfect pointer to map people to your Christmas party? Or really want to make sure Santa knows where your house is? This adorable little animated map pointer shows off what you can do with just a bit of CSS and JavaScript. And check out the other Christmas-themed Codepens he has. 

Holiday CSSweater Generator by Adam Kuhn

See the Pen Holiday CSSweater Generator by Adam Kuhn (@cobra_winfrey) on CodePen.

I am always a sucker for a knitted sweater, and Adam’s sweater generator gives you plenty of CSS and JavaScript to play with, as well as the adorable designs. And go for dark mode for an extra treat.

Pure CSS Christmas Lights by Toby

See the Pen Pure CSS Christmas Lights by Toby (@tobyj) on CodePen.

A gorgeous bit of CSS here, with slowly glowing lights built using animation and box shadows. Definitely the kind of thing you can put onto a virtual Christmas card or, with a bit of colour change, use year-round to have a nice gentle glow. 

Saving Christmas by Lantare Code

See the Pen Saving Christmas by LantareCode (@LantareCode) on CodePen.

This one I’m linking in full-page view as well as embedding the editor view because you need to be able to play it. With CSS, JavaScript, and a bit of HTML, it’s a surprisingly tough little maze game where you need to get the gifts to the tree without touching the sides. With falling snow, a mid-90s’ style, and surprisingly difficult gameplay, you’ll be spending a few hours on Christmas Day focusing on your screen rather than your family.

Those are five that I like, but I need to pop in a sixth. Andrew Hawkes’ SCSS random() Christmas Tree is a gorgeous little bit of randomly animated CSS that produces a beautiful triangle-based tree. And that’s why it’s the featured image for this post.

Happy holidays!