Refresh page to restart animation from the beginning.
Animation follows the same general approach as
Euclid's Elements: Proposition 47
Claim: The size(area) of the triangle in motion never changes.
Notice that we have two kinds of motion: rotation and skewing. Clearly the size of the rotating triangle isn't changing so let's turn our attention to the skewing process: Refresh the page and observe the motion of the green triangle starting from side a, its tip tracing along side b. Now consider the fact that:
area(triangle) = ½(base × height)
even for obtuse triangles. Also, the triangle bounded by sides a, b and c is right(the angle between sides a and b is 90°) so side b is perpendicular to side a and thus parallel to the base of the triangle. Therefore the height of the triangle never changes, and neither does its area. The area of the skewing triangle after the rotation doesn't change either since the height of the triangle remains the same throughout that skewing process as well.
QED baby
The animation shows that:
½ area(square above) = ½ area(rectangle below)
which means
area(square above) = area(rectangle below)
Combining the results of a and b gives:
a2 + b2 = c2
Full disclosure: The idea for this came to me back in the 90's after reading two books: Fractals Everywhere(fig. 2.5.1: path continuously deformed...) and Euclids Elements(Prop. 47). Jim Morey beat me to the internet with an animated Java applet earning him the grand prize for programming at the first Sun/Java conference in 1995. Java applets are no longer supported on the web so here is an SVG/Javascript version with commentary. © 2026 Joe Hartman