What are some ideas to have a odd shape (a heart) turned into a meter without clipping

[lelz9111 (GGG)]

What would be the best way to make a odd shape into a sort of “meter” such as a heart without clipping.
Currently there are 2 images, The Outline of the heart and the inner part of the heart

What i want for the end product:

(arrow to show it draining ((aint important) and the black background will be transparent)

Inner (possible to replace with a white square and disable clipping?)

(if there’s a way to be able to have a square that doesn’t clip outside the outer heart that can be used instead of having a separate heart being squished or having the top half of the shape instead of a clean line like its draining (shown in what the final should be)

(context: the heart drains showing how much mana the player has)

Outer:

[Pxlarius]

Hmm, maybe UI Gradients could help you?

I just made this quick example using a random toolbox heart image and a UIGradient and it seems to have worked, is this what you mean?

Here are the properties of it:

To create the draining effect, change the Color property to your liking using a ColorSequence and then tween the Y value in the offset.

Hope this helps!

[lelz9111 (GGG)]

bless thank you so much bruh