helderman / blend-fire

CSS Fire Animation

Incredibly simple CSS animation, producing a very convincing fire effect.

Live demo

https://helderman.github.io/blend-fire/html5/index.html

Browser support

Works on recent versions of Google Chrome, Firefox, Microsoft Edge, Opera, Samsung Internet.

Works on Safari, but frame rate is low. Needs investigation; possibly Safari is throttling 'unimportant' animations in an attempt to balance the CPU load, as suggested here. For now, I'd recommend Apple users to use Firefox instead; the animation is a lot smoother there.

Does not work on Internet Explorer.

How it works

Two 'solid noise' images are continuously sliding along each other, blended together with 'difference' blend mode. A gradient is blended in to make the flames 'die out' as they rise. Additional filters are giving it the right contrast and color.

Video

https://www.youtube.com/watch?v=w3lhF7yMVfM

Credits

This is a fork of an earlier repo of mine, blend-smoke.

Image produced using GIMP. Thanks to Ken Perlin for the noise algorithm. This animation shows once more how versatile his noise is in modelling natural phenomena.

Thanks to Shadertoy for giving me the platform to experiment with noise algorithms. It is here that I first discovered that the sum (or difference) of two noise functions makes a great fire. Here's a demo I made:

https://www.shadertoy.com/view/fdtczl