Proofs without words in cut paper, plus any polygon you draw cut into any other.
Three classics play on a cutting mat: four triangles that leave c² or a² + b² uncovered, Perigal's dissection of the square on the longer leg into four pieces that slide into the square on the hypotenuse, and Dudeney's 1907 hinged triangle-to-square. The fourth scene runs the Wallace-Bolyai-Gerwien theorem for real: each polygon is triangulated by ear clipping, every triangle becomes a rectangle (halve its height, spin the two top corners 180 degrees), every rectangle is halved and restacked and then slid into a strip of the square's width, and the strips stack into a square. Doing that for both shapes and intersecting the two partitions of the square, which is convex polygon clipping, gives a few hundred pieces that carry one shape onto the other by rotations and translations alone. Each piece keeps its rigid transform through every stage, so it can fly from shape to rectangles to square to rectangles to shape, colored by the triangle it came from.
Try it. In Any polygon, draw a closed shape on the mat: it is scaled to the same area and the current shape is cut into it. In the other scenes, drag sideways to reshape the right triangle or to swing Dudeney's hinges by hand. Click the tabs, press 1 to 4, or use left and right to switch scenes, and Space to pause.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated dissection proof of the Pythagorean theorem with JavaScript and the HTML canvas element, drawn like colored paper cutouts. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it like a green cutting mat with a light grid.
- Pick a right triangle with legs a and b (a + b = 1 in your units) and draw a square of side a + b.
- Place four copies of the triangle in its corners so the uncovered middle is a tilted square of side c. Label it c².
- Animate the triangles by pure translation into a second arrangement: two a by b rectangles along the diagonal, leaving an a² square and a b² square uncovered. Label those, hold, then animate back. Ease each move and start each piece a little after the previous one.
- Store each piece as a polygon plus a rigid transform (an angle and a translation) and interpolate the transform, so the same code can move any piece.
Once that works, make it beautiful:
- Draw each piece with a soft drop shadow that grows while it is moving, as if lifted off the mat. A cheap trick: fill the shadows into a quarter-resolution canvas and draw it scaled up, which blurs them for free.
- Add Perigal's dissection: cut the square on the longer leg through its center with one line parallel and one perpendicular to the hypotenuse, and slide the four pieces and the small square into the square on the hypotenuse.
- Let a sideways drag change the triangle's shape live.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as Dudeney's hinged triangle-to-square, cutting any polygon into a square with the Wallace-Bolyai-Gerwien construction, or letting me draw my own shape.
