# How to animate or fill svg (linear) **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 12, 2022, 11:44am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965 "2022-09-12T11:44:26Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Mahesh\_Akolkar](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mahesh\_Akolkar](https://forum.inductiveautomation.com/u/Mahesh_Akolkar)\ **Post date:** [September 12, 2022, 11:44am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/1 "2022-09-12T11:44:26Z")
Hello I wanted to know that, how I can use CSS to fill below Tank image. I have imposed a sky blue colour svg on Tank image and want to fill the section (showed by arrows) from 0 to 100% I have 2 elements for this svg. One element is of light sky blue colour and another element is for dark sky blue colour. ![TankLevelByCSS](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/3669f2dc465c8cf3d23c0e9b6ed4cfa1cf1436a4.png) ![TankLevelByCSS_2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3e11e7569ac2a97b03f226db7e7d5b28c360391d.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 13, 2022, 6:17am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/2 "2022-09-13T06:17:10Z")
Adding a curved (radial-)gradient to the darkblue and a color change to the bottom would probably look like its filled ---
**Author:** ![Mahesh\_Akolkar](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mahesh\_Akolkar](https://forum.inductiveautomation.com/u/Mahesh_Akolkar)\ **Post date:** [September 13, 2022, 12:31pm UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/3 "2022-09-13T12:31:51Z")
Thank You, I can add gradient and change color but, I want to fill that dark sky blue color like tank level increases and decreases. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 13, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/4 "2022-09-13T14:30:39Z")
Is it a filled ellepsis or a hollow (crecent moon) ? you can play around with linear gradient, radial gradient or idk even 3d transforms give us the svg if you want more help ---
**Author:** ![Mahesh\_Akolkar](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mahesh\_Akolkar](https://forum.inductiveautomation.com/u/Mahesh_Akolkar)\ **Post date:** [September 14, 2022, 10:46am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/5 "2022-09-14T10:46:00Z")
Yes, we want to fill cresent moon. Gradient filling won’t help because we want to control percentage of filling like tank level. ---
**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:** [September 14, 2022, 10:52am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/6 "2022-09-14T10:52:42Z")
You could animate the gradient full though, and make two central stop points very close to each other to keep the edge crisp ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 14, 2022, 11:20am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/7 "2022-09-14T11:20:22Z")
You can kinda controll the fill with the offset of one of the stops. Its not perfect, but eh its gonna be a lot more work to make it better tbh, linear will look a lot worse. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/18d6f8e488e202e9764959f2fb095fadd249a2e1.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f9020287d15b1218935311761c44e746ba6521db.png) ```auto [ { "type": "path", "fill": { "paint": { "stops": [ { "offset": "0.1", "style": { "stopColor": "#000066" } }, { "offset": 1, "style": { "stopColor": "#005500" } } ], "type": "radial" } }, "name": "path", "d": "M153.699,292.138C68.95,292.138,0,223.185,0,138.439C0,79.742,32.675,27.002,85.28,0.807 c2.369-1.174,5.215-0.718,7.077,1.144c1.864,1.864,2.345,4.711,1.183,7.074C83.941,28.527,79.077,49.496,79.077,71.33 c0,77.972,63.432,141.407,141.395,141.407c22.08,0,43.247-4.978,62.942-14.777c2.366-1.177,5.213-0.721,7.074,1.141 c1.873,1.867,2.342,4.714,1.177,7.073C265.61,259.195,212.738,292.138,153.699,292.138z" } ] ``` if you want it “crip” and in a stop ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3e52590b388c472566a6a6a18b5940129e6213fe.png) ```auto "stops": [ { "offset": "0.6", "style": { "stopColor": "#000066" } }, { "offset": "0.65", "style": { "stopColor": "#005500" } }, { "offset": 1, "style": { "stopColor": "#005500" } } ] ``` ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 14, 2022, 11:45am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/8 "2022-09-14T11:45:42Z")
BTW radial gradient looks a lot better if you use an **ellipses** instead of a path ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f141318ec35c2ef431aa4fdf09928393539075f6.png) You def should use an ellespsis for the border, you can still use path for the “floor”, it should render the same if you make sure the order is correct so that the floor is infront of it ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/106457f8387082dde39e6c8bdbfb4381394b05ad.png) (ugly collors iknow i just took something xd) i’ve also added in a demo for 3d transform [fillmoon.zip](https://forum.inductiveautomation.com/uploads/short-url/dNITKncclz3RzU8hKZDQnuCj0Ln.zip) (19.7 KB) ---
**Author:** ![Mahesh\_Akolkar](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mahesh\_Akolkar](https://forum.inductiveautomation.com/u/Mahesh_Akolkar)\ **Post date:** [October 6, 2022, 5:12am UTC](https://forum.inductiveautomation.com/t/how-to-animate-or-fill-svg-linear/63965/9 "2022-10-06T05:12:30Z")
Thank you very much. Really appreciate your efforts and help. This solution helped me a lot. 🙂 😇