# Perspective Equivalent Vision Level Indicator?

**URL:** <https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [August 17, 2020, 2:45am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786 "2020-08-17T02:45:23Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [September 16, 2020, 1:44am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/4 "2020-09-16T01:44:29Z")

</div>

You could take it one step further…  
If you create an svg drawing and clip one of the filled objects you can do something like this

 ![fill animation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a788d52f1136546bc8c8de578db52bc5518ca82.gif)

I created an svg file in inkscape by drawing a shape and duplicating it. One shape is gradient filled and the other shape just has stroke defined (no fill) as the outline. Then added a text object too.

In perspective designer, afer dropping the svg onto a view (embedded), I added the ‘style’ property to the svg’s gradient filled object (element[0]). Then added the value ‘[clip-path](https://css-playground.com/view/65/clipping-paths-with-clip-path)’ to the style so I could bind the inset clipping to the scroll bar value. Bound it like this:

```auto
'inset('+toStr(100-{../Slider.props.value})+'% 0px 0px 0px)'

```

I bound the text value to the scroll value too.

Here’s my svg:  
 ![fillindicator_opt](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c046c7860fd5e22746f8220c1079d35a210ad713.svg)

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786)._