Note: this article makes use of MathML, the standard XML markup for math formulas. Sadly, this is not properly supported on some allegedly ‘modern’ and ‘feature-rich’ browsers. If the formulas don't make sense in your browser, consider reporting the issue to the respective developers and/or switching to a standard-compliant browser.

This article has been inspired by a post on /r/math, that presented a graphical way to show that the sum of the series of consecutive powers of 1/2 (geometric series with ratio 1/2) converges to 1:

∑ n = 1 ∞ 1 2 n = 1 2 + 1 4 + 1 8 + 1 16 + … = 1

The proposed image was very roughly made and raster, so I decided to re-create it, cleaned up and in vector form:

Of course, this is not the only possible approach to demonstrate (note: demonstrate, not prove) the convergence of the series. A similar approach (the one I was more familiar with) is based on rectangles rather than triangles:

Which one of the two is ‘better’ is obviously up to debate: some people prefer the triangle version, because the series is assembled from figures which are (geometrically) similar, while others prefer the rectangle version, as it features lines parallel to the sides of the original square, and thus clearer features to a higher detail (i.e. more visible sections).

Of course, these are not the only possible representations for the series; for example, sticking to rectangles, one can also proceed by halving each remaining fraction of the original square with lines all parallel, obtaining the striped version:

I honestly find this version boring compared to the other two, since in this case it makes much more sense to give a one dimensional representation, by consecutive halving of segments, instead:

The segment splitting is most definitely the simplest, but some people might be more comfortable with the two-dimensional demonstrations, since apparently humans tend to deal better (intuitively) with areas than with lengths.

Animations

Note: this section stress-tests support for SVG animation with SMIL. Sadly, this is not properly supported on some allegedly ‘modern’ and ‘feature-rich’ browsers. If the animations don't make sense in your browser, consider reporting the issue to the respective developers and/or switching to a standard-compliant browser.

One of the upsides of using SVG as format for these demonstrations is that it is possible to animate them. Animations have two advantages in cases such as these: one, they present a more intuitive visualization of the “progress” of the infinite summation; and two, they make it easier to avoid the mess which is “perfectly centered text” in SVG (an issue that deserves its own rant).

We can animate the one-dimensional example by introducing each new term with a timing which is proportional to the length of the segment, obtaining something like this:

There's no need for textual explanation, although we can achieve it by adding an animated summation (which sadly doesn't seem to work correctly in most browsers):

Of course, the same can be done in two dimensions, with both the triangles and rectangles approach.

(And of course we could have the variants with formulas here as well, but I think the idea is clear and, honestly, coding these SVG and MathML by hand gets boring after a while, so their realization is left as an exercise to the reader.)