Christmas tree card 2015

Hey, hope you like my sparkly Christmas tree card.

The idea for the design all started when I was struggling to find inspiration for my Christmas card design. For the past set of years I’ve always designed my own Christmas card and this year I couldn’t think of what to do until I saw this website advent of code which was from an email by webdesignernews. I just thought the simple tree with animation flashes looked great. I’d used ASCII art before but only in the HTML source code for an old website just for a bit of fun but that was a few years go.

I quite fancied the idea of creating my own ASCII art Christmas tree using a photo of my actual tree, the problem was that I hadn’t put it up yet and I’d still have to assemble it in a different place to take the photo.

A quick Google search found some ASCII art websites that will process a photo. Using one in particular, a quick test showed that a photo of a tree looked too messy.

I decided to quickly draw my own using Illustrator.

Xmas-tree card

I preferred the minimalist concept of a tree anyway.

The first tests were still a bit shabby:

Christmas Tree ASCII Art

Christmas Tree ASCII Art

so I ventured onto page two of the Google search (Who views page two nowadays?) and found this website. This seemed to produce better results:

Christmas Tree ASCII Art 2

Christmas Tree ASCII Art 2


The perfectionist inside me wanted to manually redraw the perfect tree but then again I quite liked the fact that an algorithm had created the slight imperfections.

The Card

The website allowed me to copy the HTML code which I could easily paste into Indesign as black and white but I couldn’t recreate the colour. I needed to somehow recreate HTML within InDesign and I didn’t have the time to test. I resorted to saving a pdf within Chrome of the HTML web page created from the code. The characters were a little small so I tested different monospace fonts until I found Adobe’s brilliant ‘Source Code Pro‘, which comes in tons of different weights. I changed the font to bold and this made the colours stand out.

The ‘Merry Christmas’ text on the front page uses the same typeface but I had to manually kern the glyphs to make it more eye-friendly.

Christmas Card 2015

Christmas Card 2015

The web page

The more I worked on the design for the card, the more I realised that it had to go online, so I put the code onto a simple web page but there were some things missing. It had have sparkly lights! I knew that under normal circumstances I could code this pretty easy but as we were dealing with pre-formatted code where each character had it’s own span with retro inlined styling I knew this wouldn’t be quick.

At just under 1mb, the file seemed very large. Indeed the page loaded in about ten seconds! Waaay too long. Upon inspection I noted that each blank space also had its own span with an RGB styling of white. I did a quick find and replace of:

<span style="color:rgb(255 , 255 , 255);"> </span>



no-brainer really. It cut the file size in half. I was then able to make the background black and create the shiney sparkly lights using a bit of CSS animation magic.

See my pen Christmas Tree (@danjohnsonwhitstable) on CodePen.

I then added a simple media query for smart phones but as yet this has not been fully tested so at this moment it’s best to view on a desktop.

To finish merging the graphic printed card with the coded element I added a smart link on the back of the card:

So there you have it; one sparkly Christmas tree card.

Hope you have a great Christmas and all the very best for 2016!


Back to the Christmas Tree


This entry was posted in Me and tagged by Dan. Bookmark the permalink.

About Dan

Freelance web and graphic designer currently residing in a small town in Kent, UK, called Whitstable, famous for oysters. It's got a great beach.