Pure CSS Fire

I was recently playing with creating a CSS version of mesh gradients. The animation that came out of that was really pleasing to the eye, and i was excited to see what else I could do with the concepts there. In general, I like being able to take something highly structured, as html/css is, and use it to create something which feels wild and random.

There's nothing more wild and random than fire, so let's create that.

We won't be using SVGs, but we will lean on filters and other layering effects to create the billowing, wild look that we're going for. Here it is inside of a phone simulator:

If we turn off some of the effects, it quickly becomes much more clear what is going on: