Change color of sprite with a fill percentage?

I would like to achieve an effect like in this example picture:
https://imgur.com/a/74sRy3E

Basically I want to be able to fill a sprite with color from 0-100% but for the coloring to follow a "predefined" path. If you look at the second example, only the right line is filled even though there are other lines at the same height if it were a simple fill from top to bottom.

Is it possible to make an effect like this? Perhaps with some masking technique where a copy of the sprite is prepared with a black to white gradient?

Please note that I'm just starting out with Unity and haven't worked with shaders before. I would appreciate any tips to get me started.
Bonus question: If these sprites would be animated, would that complicate things by much? The idea would be to use this effect for some neon glow enemy sprites that only consist of these "outlines".

 

No need for shaders. Use a

Gradient

and look up the color and assign it to the

.color

field of the Image, which would be set to be Filled mode.

EDIT: correction: the above is not a suitable solution for a complex irregular shape, my bad.

 

@Nathien you want to do this on a canvas at runtime correct? It may be easier to do with Bezier curves using a script than sprites. Basically you can generate a list of the points for your curve, draw the full curve in the background color, then gradually draw the points you have traversed on top of the background curve using a different foreground color. This approach is very flexible allowing you the option of having persistent or dynamically generated curves depending on your use case.

Here is a nice tutorial on creating Bezier curves from a unity script.

 

Thanks for the replies, not sure about the first one, but a bezier curve sounds interesting, will give your link a read, but to clarify the question:
I don't intend to do this on a canvas for UI. My goal was to make stylized enemy sprites whose HP is depicted by their bodies (who consist of just the outlines) themselves.

Would a bezier curve still be useful for that or do you have any other ideas as well?

 

Ah, I see. I think I would still use a dynamically drawn shape for that but maybe simple lines instead of Bezier curves. The curves might make it difficult to create precise outlines of your enemy characters. You could still do something similar to the tutorial linked above only draw straight lines between the control points instead of curves.

I think I would do something like this ...

1. Figure out the points for each character that when connected form their outline and save them
2. Compute the total length of the line segments between the control points for each character and save it
3. For each frame
   1. Draw the full shape in the background color
   2. Draw the partial shape in the foreground color. Keep track of the foreground length you have drawn, if drawing the next foreground line segment would exceed the enemy hp then only draw the percentage of the line that is needed