# CSS - Advance style sheet referencing SVG elements

**URL:** <https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 13, 2024, 5:50am UTC](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770 "2024-04-13T05:50:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Garick\_Willey](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Garick\_Willey](https://forum.inductiveautomation.com/u/Garick_Willey)\
**Post date:** [April 13, 2024, 5:50am UTC](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770/1 "2024-04-13T05:50:51Z")

</div>

Hi all,

New to Ignition and new to CSS. I am trying to create some custom "animations" on an SVG. The objective is have a shape (in this instance for testing I'm using a rectangle) fill with a gradient.  
I have embed an SVG rectangle with 2 stop points, and I can bind to these points to adjust the offset value between 0 and 1 to play with the gradient.  
I am trying to come up with a to "transition" the fill so it does it smooths from a white box to full box with the gradient.

On mouse click and hold, i wanted to transition the offset value from 0.0 to 1.0. Not sure the best way to do this. My first thought was to use CSS on the advance style sheet, but I cant figure out how to reference the offset value or if this is even possible. If i could i could potentially do something with keyframes, not sure how many i would need to use to get a smooth looking transition.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a902a5f52dc58041348ab750bebb4ce240db7fa.png)

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [April 14, 2024, 2:24am UTC](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770/2 "2024-04-14T02:24:06Z")

</div>

This should show you one way to do it, although doing it on mouse click may be difficult. I would recommend you place the animation in a unique style, and use the clicks event to apply the style dynamically.

> [@Animated SVG dynamically](https://forum.inductiveautomation.com/t/animated-svg-dynamically/86984/6):
>
> Agree with @PGriffith Here is a spinner animation. Stylesheet CSS looks like: @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .psc-spinner { animation: spin 1s linear infinite; } Looks like: [spinner] Looks a lot better in the browser, the GIF kind of messes with the appearance of the animation. Here is the view: { "custom": {}, "params": {}, "props": { "defaultSize": { "height": 422, "widt…