Cool water vapor effect in HTML5 Canvas (opens in new tab)

It's 'just' a couple of scrolling images for the vertical and horizontal vapour, and a rotating image for the swirl where they meet. Very effective indeed. I'm impressed.

I like the end result, but i'm not sure why they decided to use 14 canvas tags when 1 would have worked just as well.

It seems wasteful, canvas was designed specifically to allow drawing and manipulating multiple images on a single surface, these guys are using canvas as if it were a div with a background image.

Doesn't work with my resolution of 1280x1920 px. ;)

Goes to show, you don't always need to do things the hard/proper/science way to make something like this convincing. Smoke and mirrors ftw. (although this particular set of smoke and mirrors could probably do with a little optimising. I'ts a good effect nonetheless)

Took about 2 minutes before the animation actually started, but clever effect.

This is much like how particle systems in games work

Cpu: 42%