This is another useless but cool effect you can do in HMTL 5 (See also: Water ripple effect done in HTML 5 and Starfield animation done in HTML 5), let it snow:


This is a simple algorithm that initializes each snowflake with a set of random values like position, size and so on, and then just iterates each frame over each flake to change its position depending on the size of the flake, Math.sin() ftw!

Since drawing circles on a canvas is pretty slow i create a 8x8 pixels big snowflake canvas beforehand and then just copy the snowflake canvas onto the main canvas with the new calculated size which is much faster.

The snowflakes are only rendered in a 300 pixels wide strip no matter how big the canvas is, then the strip is copied again and again over the canvas to save on CPU time.

The repetition is a bit visible but only if you look out for it.

Enough yapping, here is the code, just open it in a browser: Snow effect in HTML5

If you are using this on your website and you are a nice person you can show it by giving me a credit (backlink) somewhere on your page, thank you!

Please note the more Flakes you render (Either by setting a high height for the canvas or increasing flakeNumberModifier) the more CPU load you create.