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.
Adding a curved (radial-)gradient to the darkblue and a color change to the bottom would probably look like its filled
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.
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
Yes, we want to fill cresent moon. Gradient filling won’t help because we want to control percentage of filling like tank level.
You could animate the gradient full though, and make two central stop points very close to each other to keep the edge crisp
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.
[
{
"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
"stops": [
{
"offset": "0.6",
"style": {
"stopColor": "#000066"
}
},
{
"offset": "0.65",
"style": {
"stopColor": "#005500"
}
},
{
"offset": 1,
"style": {
"stopColor": "#005500"
}
}
]
3 Likes
BTW radial gradient looks a lot better if you use an ellipses instead of a path
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
(ugly collors iknow i just took something xd)
i’ve also added in a demo for 3d transform
fillmoon.zip (19.7 KB)
3 Likes
Thank you very much. Really appreciate your efforts and help. This solution helped me a lot. 
1 Like