Live Advent Candlestick - css3/javascript

Live Advent Candlestick - css3/javascript

See it in action!

A swedish tradition is to light four candles, one for each advent before christmas eve. Each light is lit on their respective advent making the first candle burn the most and so on.

I wanted to try and make a digital, working version of this where each candle is lit on the correct date and their height is calculated based on days left till christmas. It was also a great project to learn more about Sketch, really liking it this far!

The animations are all done with css3 and only work in webkit as of right now. I also just implemented gyroscope support on smartphones and tablets. It works but is a bit crude at the moment. Still a fun thing to try out.


keyboard shortcuts: L or F like Z toggle zoom