Fill a percentage of an SVG and animate the fill

Question

Currently, I am working on a project that is comparing state data with data from another country. One data point is percentage of protected land and I want to fill the a per

Answer 1

Well, here's a pretty dumb way in Canvas...(and I'm assuming you mean you want a certain % of interior area filled).

Step 1: Dump a solid image of each state into Canvas

Step 2: Count the number of nonzero pixels

Step 3: Extract the edges using an edge extraction convolution

Step 4: For each line, iterate horizontally within each row within the shape, coloring in pixels until you've reached the x% of the shape you'd like to portray.

It is possible to do this in SVG, but you'd need to hand-tesselate the shape, track all your areas and then hand calculate the ones to fill and it wouldn't do what I think you want - which is to have a state fill up like it's a water container?

An alternative solution is, of course, to 3D print transparent containers in the shape of all 50 states, fill them with colored water to the desired levels. Photograph them, and then manipulate that image via an SVG filter (feImage + feColorMatrix+feComposite) to selectively fill an SVG image. This may be faster than learning tesselation (or Canvas).