# Creating a Dynamic Flame (Or Any Dynamic Graphic)

**URL:** <https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325>\
**Category:** Ignition\
**Tags:** ignition81, scripting, perspective\
**Created:** [January 6, 2023, 8:05pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325 "2023-01-06T20:05:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Estera\_Cioroch](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/estera_cioroch/32/59889_2.png) [@Estera\_Cioroch](https://forum.inductiveautomation.com/u/Estera_Cioroch)\
**Post date:** [January 6, 2023, 8:05pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/1 "2023-01-06T20:05:02Z")

</div>

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.)

However...it 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!!

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 8, 2023, 6:40pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/2 "2023-01-08T18:40:36Z")

</div>

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

> **[What is High-Performance HMI? - ISA101 - RealPars](https://realpars.com/high-performance-hmi/)**
>
> High-Performance HMI is the industry answer for a standardized, easy to use, and more productive HMI graphics system to implement.

---

<div class="post-metadata">

**Author:** ![Estera\_Cioroch](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/estera_cioroch/32/59889_2.png) [@Estera\_Cioroch](https://forum.inductiveautomation.com/u/Estera_Cioroch)\
**Post date:** [January 9, 2023, 2:23pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/3 "2023-01-09T14:23:50Z")

</div>

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. :))

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [January 9, 2023, 2:55pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/4 "2023-01-09T14:55:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Estera\_Cioroch](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/estera_cioroch/32/59889_2.png) [@Estera\_Cioroch](https://forum.inductiveautomation.com/u/Estera_Cioroch)\
**Post date:** [January 9, 2023, 3:00pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/5 "2023-01-09T15:00:09Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 9, 2023, 3:27pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/6 "2023-01-09T15:27:18Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [January 9, 2023, 4:01pm UTC](https://forum.inductiveautomation.com/t/creating-a-dynamic-flame-or-any-dynamic-graphic/68325/7 "2023-01-09T16:01:57Z")

</div>

[flame.zip](https://forum.inductiveautomation.com/uploads/short-url/wSwX9NCnSAcXIh1IdmjAexhF68S.zip) (3.8 KB)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/753185761e39d646f59bb6d4ce775ed899ed4580.png)
