The issue of the traditional rectangular or heart-based health bar is something well-understood and easily solved. But what is the accepted solution for more "creatively-shaped" health bars, like the mockup I've made below?
The obvious way to do this would be to have "in-between" sprites, so the third image would be its own sprite, along with many other transitions for different levels of health. But that seems really inelegant and the number of in-betweens needed to create a smooth transition between health states would be large.
The only other idea I can come up with is to overlay the "full health" sprite on top of the "empty health" sprite and pre-bake sets of pixel coordinates to represent each tick of health and then make them opaque or transparent as health goes up or down.
I intend this question to be language and platform agnostic but feel free to provide a concrete sample in any language/library/framework if it helps the answer.