Creating a Dynamic Flame (Or Any Dynamic Graphic)

I am designing a SCADA for a boiler room and need a way to implement a growing/shrinking flame.
So far, I've tried doing this by using a static .svg flame graphic and then linking a tag to a math formula script that scales it alright (I tie this to the width, height, and also the x- and y- coordinates to make sure that as it grows or shrinks, it doesn't shift it's place on the page.) doesn't scale nicely at all via the launch session or live versions, and I end up having issues with it shifting on the page after all! The designer is the only place it kind of functions like I want it to. Any suggestions on how to create a dynamic flame would be deeply appreciated!

P.S. if they release a dynamic flame graphic as one of the five dynamic graphics that they offer...PLEASE LET ME KNOW!!

The best solution, in terms of abiding by any sort of hmi standard, is to not animate a flame flickering. Reserve distracting colours and graphics for alarms only


Thank you for your response. To clarify, I am not looking to make the flame constantly flicker (because yes, that WOULD be distracting), but actually grow or shrink based on the firing rate of the boiler. This is essential to reflect accuracy in the HMI. We've incorporated an otherwise minimal, simple design. Any other suggestions would be greatly appreciated! Great article by the way. :))

One way would be to insert a number of images all scaled and placed correctly on top of each other and hide/show the correct image based on the boiler value.

There may be some CSS magic to accomplish the scaling correctly, but I haven't tried it.

Very true!! I've briefly thought of that but never actually tried it! I'll give it a go and see how it works for this project! Thank you!

Try with the transform: scale(x) css property.

You'll probably need to use a transform to actually generate the right property, but if you can't find another way...

1 Like (3.8 KB)