I was recently inspired by Jeffrey Miller's embeddable Advent Wreath widget to try my hand at illustrating and animating an advent wreath in HTML5 with the <canvas> element or by animating an SVG.
My heart was in it for a while, but I ultimately gave up on the project due to the fact that I had already spent a couple hours on it and wasn't happy with my progress...
However, I did end up with a fairly good illustrator/vector wreath and candles (I spent a bit of time trying to get the flames looking just right), and also created a brush to create the actual wreath, making it look somewhat like an evergreen wreath.
I could spend a bit more time making things look a little nicer (everything's relatively flat right now), but I thought I'd just release this artwork for anyone to use and improve. I just ask that if you make something awesome with it, you let me know how you did it and give a link to an example :)
You can download the brush and the wreath graphic using the links at the bottom of this post.
Advent Wreath by Jeff Geerling is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at www.jeffgeerling.com.
Comments
Additional info: I was originally trying to actually draw everything on an HTML5 Canvas (or use SVG graphics), and then animate the flame organically by moving it in a few different randomized ways, and also changing the brightness of the glow... but that was not working out too well (would've taken too long to iron everything out).
Alternatively, I was going to (and still could) simply animate everything using sprites on a canvas. I was thinking of having 3-5 sets of sprite animations of the flame—one with a little flicker, one with a sway, one with wind blowing it to the right, etc. This isn't quite as slick as animating the actual shapes, but would still give the desired effect. The downside is that this approach doesn't scale to different screen sizes/types as well as vector animation, unless I set up 'small' 'medium' and 'large' sprites, which is too tedious :-)
I think it looks really good.