I was looking to make vertical progress bar in icons, similar to those in mobile games Reigns or Lapse, but I can’t get a good result. Do you have any ideas on how to make them ?

I tried to use two superposed svg, one in black that represents the emptiness of the progress bar and a green one for the fullness. Didn’t work the way I want, it was filling the svg but not correctly. I tried to superpose two png but nothing came out of this. Asked copilot some help but didn’t solve anything.

Here is what it look like in Lapse :
progress bar image