Calculating the area of an SVG Path or Polygon

Someone on Stack Overflow asked, “How do I calculate the area underneath a Bézier curve?”

If we approximate an SVG Path with an arbitrary polygon (see this demo) it becomes really easy (and fast) to get a close answer. See the standalone demo, or just play below. The cool part is that it works for any arbitrary SVG Path.

Note that loops appear as ‘positive area’ in SVG, but are calculated as negative area. For example, a symmetrical figure 8 would come out with an area of ‘0’.