Fill-Up A Shape

Dynamically fill a shape from bottom to top. This uses a <mask> that includes an element that duplicates the shape. A rectangle, located/sized based on the shape's bounding box, calls the mask, and moves rectangle upward, simultaneously changing its height, to fill the shape.
Scenerio:
This initially shows a heart shaped path.
Select the desired shape, then click the 10% button to fill it from bottom to top.

Select Animate button to animate the fill.

Shape:



SVG Source:
Javascript:

OK in:IE11/CH41/FF35