How to fill a png transparent background so that a certain part is filled?

Question

css

I have a hood where "Hunger, Thirst" is located.
I need the pngshka to be filled from the bottom up from the inside.
Like, if the player has 50% thirst, then the filling is 50% blue.

It seems to be easy, but I just can't figure it out.

Answer 1

In no way, you can’t influence a png image except for the shadow and color + filters, but such animations are made on SVG or by replacing a pre-made image.

Answer 2

You need to replace PNG with SVG and use some kind of linear gradient inside, see here how it works https://stackoverflow.com/questions/32645053/is-it...