# Dynamic Shape Appearance

**URL:** <https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [August 22, 2022, 1:51pm UTC](https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268 "2022-08-22T13:51:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pyroelk](https://avatars.discourse-cdn.com/v4/letter/p/258eb7/32.png) [@Pyroelk](https://forum.inductiveautomation.com/u/Pyroelk)\
**Post date:** [August 22, 2022, 1:51pm UTC](https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268/1 "2022-08-22T13:51:02Z")

</div>

Can someone point me to a resource for dynamic shape appearance? I want to change the fill paint/gradient/stroke style based on PLC variables but I am unsure of the syntax.

Looking for something similar to the toBorder() instruction used for border editing.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 22, 2022, 2:18pm UTC](https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268/2 "2022-08-22T14:18:32Z")

</div>

vision or perspective?

---

<div class="post-metadata">

**Author:** ![Pyroelk](https://avatars.discourse-cdn.com/v4/letter/p/258eb7/32.png) [@Pyroelk](https://forum.inductiveautomation.com/u/Pyroelk)\
**Post date:** [August 22, 2022, 2:22pm UTC](https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268/3 "2022-08-22T14:22:29Z")

</div>

Vision

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 22, 2022, 4:23pm UTC](https://forum.inductiveautomation.com/t/dynamic-shape-appearance/63268/4 "2022-08-22T16:23:47Z")

</div>

By far the easiest way to do this would be to use the style customizer.

1. Create a custom property on your shape:  
[Vision Component Customizers - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Vision+Component+Customizers#VisionComponentCustomizers-CustomProperties)
2. Bind the custom property to your tag (or, if you’re using multiple tags, use an expression to collapse them into a single value. If you’ve got many boolean tags, consider [`binEnc`](https://docs.inductiveautomation.com/display/DOC81/binEnc)).
3. Use the style customizer to set up styles to react to that custom property:  
[Vision Component Customizers - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Vision+Component+Customizers#VisionComponentCustomizers-StyleCustomizer)  
You can choose the custom property as the ‘driving property’, then change as many appearance properties on the component as you want to in response to change of the driving property.
