Background
The Pythagorean theorem asserts that for a right triangle with hypotenuse \$c\$ and other sides \$a\$ and \$b\$, the area of the square placed upon \$c\$ is equal to the sum of the areas placed upon \$a\$ and \$b\$. This is normally written algebraically as \$a^2+b^2 = c^2\$.
One way to prove this is to draw two squares of side length \$a+b\$. In one, draw four identical \$abc\$ triangles such that their hypotenuses form a square of side length \$c\$. In the other, draw four more identical \$abc\$ triangles such that they form two rectangles with side lengths \$a\$ and \$b\$ and the same length sides are adjacent. This creates two squares with side length \$a\$ and \$b\$ respectively.
So now we have four triangles of area \$\frac{1}{2}ab\$ in each square of area \$(a+b)^2\$. In addition, the left square contains a square of area \$c^2\$ and the right square contains two squares of area \$a^2\$ and \$b^2\$ respectively. Summing up the areas inside the two equal squares, we get
$$c^2 + 4(\frac{1}{2}ab) = a^2 + b^2 + 4(\frac{1}{2}ab)$$
Subtracting like terms from both sides, we get
$$c^2 = a^2 + b^2$$
The nifty thing about this method is that it actually shows what "the area of the square placed upon" a side means.
Now of course you're wondering how I generated the diagram. I used a free SVG to PNG converter (this one) to generate the image from an SVG.
The SVG
<svg width="4400" height="2200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<style>
svg {
background-color: white;
}
text {
font: 3000% "Times New Roman";
text-anchor: end;
}
text.superscript {
font-size: 1200%;
text-anchor: start;
}
</style>
<rect x="100" y="100" width="2000" height="2000" fill="none" stroke="black" />
<polygon points="900,100 100,1300 1300,2100 2100,900" fill="none" stroke="black" />
<text x="1100" y="1300">c</text>
<text x="1100" y="1100" class="superscript">2</text>
<rect x="2300" y="100" width="2000" height="2000" fill="none" stroke="black" />
<polygon points="3100,1300 3100,100 2300,1300 4300,1300 3100,2100"
fill="none" stroke="black" />
<text x="2750" y="1850">a</text>
<text x="2750" y="1700" class="superscript">2</text>
<text x="3750" y="950">b</text>
<text x="3750" y="700" class="superscript">2</text>
</svg>
Some tags broken across multiple lines to eliminate scrolling on this site. This does not seem to affect parsing of the SVG code (I ported it back to my code to check).
Review suggestions
As always, you can review any aspect of the SVG or CSS code. But here are some areas that are of particular interest to me.
- Does this meet best standards for an SVG?
- In particular, is there a better way of keeping the numbers consistent?
- Is the resulting image visually appealing and easy to read?
- Is there a better visualization? For example, I've seen images that put both squares atop one another and use different colors or animation. Is there an appealing way to do something like that with a static black and white image?
Some requirements that may not be obvious.
- This is a black and white image. No color.
- No animation. Just a static image.
- \$a \le b \lt c\$. The first two simply by definition. If there's a smaller leg, we're calling that one \$a\$. The last by the definition of a right triangle. The hypotenuse is always the longest side.
- The image is deliberately created large. Please keep the \$a+b\$ squares the same size.
Beyond that feel free to move things around, change the stroke, change the margins, or change the proportions. But do try to remember that this is a code review. While I am certain that any number of people could draw a better visualization by hand or GImP, this uses SVG for that purpose. So please propose edits to the SVG rather than changes to the image. For example, a patterned fill is certainly possible, but please include how to do that rather than just saying, "The image would look better filled with a polka-dot pattern."
My plan is to use this to fix my T-shirt design on Zazzle, as the current image doesn't scale well.
