# Change paint fill element of a Symbol factory

**URL:** <https://forum.inductiveautomation.com/t/change-paint-fill-element-of-a-symbol-factory/102983>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 27, 2025, 2:32pm UTC](https://forum.inductiveautomation.com/t/change-paint-fill-element-of-a-symbol-factory/102983 "2025-02-27T14:32:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jose\_Lopez](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@Jose\_Lopez](https://forum.inductiveautomation.com/u/Jose_Lopez)\
**Post date:** [February 27, 2025, 2:32pm UTC](https://forum.inductiveautomation.com/t/change-paint-fill-element-of-a-symbol-factory/102983/1 "2025-02-27T14:32:39Z")

</div>

I am trying to animate a motor symbol so that the content of an element changes dynamically, so that the animated green part is constantly displayed when the motor is on.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc4dabe9bd7118d3588ca0da28cfa472d2c57f64.png)  
As you can see, I can change the color of the element I want, but I can't find a way to make it animated, I want that green part of the motor to change from a dark green to a lighter green successively.  
I have created a custom and animated style that if I apply it to any background of another component it works correctly but I have no idea how to apply it to the required fill of the engine I am working on  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2d8750c8bd94b0fdb5a7f9932ad06294f4fd402f.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea11d7067d3e2e38c46060382c726ce548359a70.png)  
Here I leave you an example of how the style I created works, but obviously it changes the background of the symbol.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/d/cd3aff87f8e1662350872d75db5a32978800c1f0.png)  
Any ideas to apply this animated style that creates the required Fill of the symbol motor? another option?

---

<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:** [February 27, 2025, 2:35pm UTC](https://forum.inductiveautomation.com/t/change-paint-fill-element-of-a-symbol-factory/102983/2 "2025-02-27T14:35:46Z")

</div>

You'll need to:

1. Remove the `fill` prop from that element
2. Add a `style` object in its place
3. Add a `classes` value to the new style object.
4. Set it to your p style

Also, your p style will need to set the shape fill colour (toward the bottom in the style ui), not the `backgroundColour`

---

<div class="post-metadata">

**Author:** ![Jose\_Lopez](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@Jose\_Lopez](https://forum.inductiveautomation.com/u/Jose_Lopez)\
**Post date:** [February 27, 2025, 3:23pm UTC](https://forum.inductiveautomation.com/t/change-paint-fill-element-of-a-symbol-factory/102983/3 "2025-02-27T15:23:52Z")

</div>

Thanks you, it works. I did exactly this and it worked...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/702bfc9de14b06ae4d0d6927eb125427d7298b12.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4bf6dbbc1658aa1bd3f09589fd2051d26eee6282.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dcd965ddf6449e7385c784ffb502afbb8dde08a2.png)