An Interactive Christmas Advent Calendar: Passion Project (2015)
A Christmas village into a digital advent calendar where each day were revealed more facts and trivia behind Christmas. The goal was to mix child-like entertainment with informative learning daily.
It started off as both an isometric challenge, and a SVG coding challenge.
Setting Ground
I had 3 weeks to go from a blank page to a final product ready to run the first day of December.
I tested different ideas around, before I settled on using an isometric grid. I sketched ideas out on paper and vectorised them in Illustrator.
I was looking to create a world of its own made of the simplest shapes, all the while reminiscent of traditional Christmas magic. My inspiration came from children's books I read when I was a child.
Finding the correct village size and structure was important, as there was no turning around after that. Tried to simplify it as much as possible for better code implementation. The roads for example were merged into one element to minimise path groups.
City Building
I had a lot of fun illustrating the little buildings, and putting the village together. I stuck to a pastel and icy colour palette throughout. And little by little, I added magical elements to spread the Christmas cheer.
Although I tried to minimise the use of gradients to a strict minimum - because of cluttered implementation in SVG -, when it came to the buildings, I decided to leave a few (such as on windows and frames).
When it came to the code, the buildings were grouped inĀ elements. I simply added a hovering class in the group to make them clickable. And later added a .outerGlow class and opacity CSS style to the golden lines around the buildings to make them appear when hovered upon.
Converted all the Illustrator vectors to SVG, for better web editing. Added hover animations on certain elements, to reveal what was hidden behind each advent number (Nov 30). The working beta version was successfully launched live online on Dec 1st, to kick off the first day of December. Final project at http://christmas.roquet.io/
Coding SVG
The heart of the challenge was to test the grounds of SVG.
Because main elements such as each building had been set into groups in Illustrator, editing hover animations to <g> elements proved to be rather simple. Each interactive <g> building elements were given hoverable animation classes such as an outline with outer glow and sound effects.
The main limitation with SVG was when implementing drop shadows to elements, which bulked up much of the code. I have also yet to have figured out how to repeat identical objects in a non time-consuming way, such as building windows - which would have removed much of the clutter in SVG code. But all in all, by the 25th, the SVG document ended weighted under 2MB.
The Challenge
25 days | 25 facts | 25 illustrations
The biggest part of the project was to consistently research, compile data and illustrate cards every day, on top of a busy period of University exams and other work commitments.
Still, searching for Christmas facts and trivia proved to be a lot of fun, and I ended up learning a lot about the history behind Christmas. And I certainly gained a lot from practicing daily illustrations and coding. I was able to experiment with a lot of different styles, and come out a lot more efficient and confident at code and graphic design.
Taking Life Daily
Day 12...
...Day 24
Find the project at
christmas.roquet.io
