I finally built a snow animation for my site to celebrate Christmas. I had used third party scripts in the past, but had been wanting to build my own.
I wanted to find a pure CSS method, but couldn’t figure out a reasonable way to make that happen, so gave in and used JavaScript.
I struggled somewhat with the performance of it. Using canvas, I couldn’t get a 60 FPS requestAnimationFrame() animation to use less than maybe 30-40% CPU on my Core 2 Duo, even just drawing a single circle in the same place repeatedly. I ended up lowering the frame rate significantly, to around 12 FPS, to get CPU usage low enough that I was comfortable using it for this non-essential animation. It is a little less smooth than I would like though.
I tried some other options than canvas to try to help with performance, such as HTML elements for the flakes or SVG. They performed really well with a tiny number of elements but became worse as I added more. The SVG ended up using only a little more CPU for the flake counts I wanted. I might’ve been able to get them lower than canvas by grouping flakes together or some other techniques. Perhaps something to try for next year.
I have made a demo and have the source code on Github for the snow modules and script to load them as part of my site’s codebase. There are also a small amount of styles. I may eventually extract it into its own library.