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.
Hah! the funny part is that at first glance, I had almost convinced myself that they had implemented a full fluid dynamics system because I was like, "it's even causing a little localized vortex!" :P
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.
Stacking canvases makes sense when you have ones that either only need to be built on startup or change infrequently. If everything in your animation is moving (like this one) then there’s no performance benefit.
If you layer several animations with varying and carefully selected run times over each other, the result never exactly repeats itself. Good luck recreating that with one GIF animation :D
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)
