Build your own emoji Christmas tree with SVG

Last week in our festive coding challenge, we explored how to code a sliding puzzle toy with some of the latest front-end techniques to grace the developer’s tool kit. But with Christmas drawing ever nearer, we thought it was time to up the ante with a ‘build your own emoji tree’ creation from front-end developer Kate. You can have a play below (or on CodePen). But do tweet us with your tree designs, @simpleweb, we’d love to see them!

If you want to build one yourself, stick around for our second festive tutorial from Kate below.

See the Pen Tree Decorator by Kate Howard (@KateH2) on CodePen.

Here is the seasonal story of how the tree came to be:

The Original Tree🌲

First of all, I created a basic tree in Sketch, exported it as an SVG and used the code from that. As you can see it’s comprised of four overlapping, mathematically beautiful right-angled triangles (polygons), and a rect for the trunk. Later, I added a few shadows to each triangle to make it look marginally more realistic, so this code did get a bit more complex.

Tree Topper Selector ⭐

I started off the customisation by controlling something simple – the decoration to sit at the top of the tree. Traditionally, this is either a star or an angel, although the Apple angel emoji is a quite creepy baby with wings but no body, so that’s why a star is the default. When a different option is selected, the handleChange function sets that as the textContent of the topSelector div. Easy!

Add Present 🎁

In a similar vein, I added an event listener to a button labelled “Add present”, which adds a present emoji to the textContent of the present container (making sure to set its width to match that of the tree, or it all ends up a mess).

Baubles✨

Time to make things a bit more interesting. I went back to Sketch to add baubles on each branch, then set about letting the user change their colour. This was done with custom CSS properties, which are set on the root element with the prefix --…

…referenced in the fill attribute for each bauble using the var() function…

…and controlled via the values of a couple of colour pickers with ‘change’ event listeners.

Decorations🔔

Once it was 3D the tree called out for more decorations. I added a ‘click’ event listener to the tree itself that adds a div to the DOM, setting its top and left values according to the coordinates of the MouseEvent (e.clientX and e.clientY). Its textContent is set to the value of a select element, filled with an increasingly wide variety of emojis that vaguely resemble Christmas ornaments.

Being absolutely positioned, the decorations didn’t really work when the browser got resized. I sneakily solved this problem by moving the tree into the top left, after an embarrassingly long time trying to add new SVG text elements to the tree instead.

When I came to add lights (i.e. yellow circle s) I worked out the trick behind this, which wasn’t all that difficult:

const light = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); rather than const light = document.createElement('circle');

Twinkly lights💡

Next, I wanted to make the lights twinkly. This was done with a function that changes the radius of each one every 500 milliseconds, selecting a random number of pixels between 1 and 2.

Let it snow ☃️

Next, for some reason, I decided it was a good idea to conjure up JavaScript snow, using a “Let it snow! ❄️” button to call letItSnow(), which includes two nested functions, createFlake() and snowfall().

createFlake() creates an absolutely positioned <div> which starts off with its top property set to 0px, and left set to a random number within the width of the screen. snowfall() increases the top value by 1px at a random interval, so each one falls down the screen at its own speed.