A hopeless tangle of edges relaxes into a crossing-free drawing, as Tutte proved it must.
Tutte's 1963 theorem says that if you pin the outer face of a 3-connected planar graph to a convex polygon and place every other vertex at the average of its neighbors, no two edges cross and every face is convex. Those averages form a linear system, solved here one damped Jacobi sweep per frame with heavy-ball momentum, so a random scribble with thousands of crossings visibly collapses and unfolds while a live counter checks every pair of edges. The graphs come from a geodesic icosahedron or a 3D convex hull of random points on a sphere: their duals are polyhedral cells, and deleting one vertex gives a triangulated disk. Each face lights up as stained glass once its own edges are clean and it winds the right way, and the same equations are a net of zero-length springs, so dragging the pinned corners makes the interior re-equilibrate.
Try it. Drag the gold outer vertices to reshape the boundary (make it non-convex and crossings can return), or tug an interior vertex and let go. Tangle (Space) scrambles it again and glides a dragged boundary home, and Next graph (N) cycles through four graph families. Puzzle (P) scrambles a smaller graph onto a circle for you to untangle by hand against the clock; Ask Tutte (T) lets the theorem finish from wherever you left it and times it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a demo of Tutte's embedding theorem with JavaScript and the HTML canvas element: a tangled planar graph that untangles itself. 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. Use a dark background.
- Hard-code a 3-connected planar graph to start with: the dodecahedron (20 vertices, 30 edges) is perfect. Pick one of its pentagons as the outer face.
- Place the five outer vertices on a regular pentagon and pin them. Put every other vertex at a random position inside it, so the drawing is a tangled mess.
- Each frame, move every free vertex part of the way toward the average position of its neighbors (a damped Jacobi step). That is Tutte's barycentric embedding being solved iteratively, and the tangle will settle into a crossing-free drawing.
- Count edge crossings each frame with a segment intersection test (skip pairs that share a vertex), show the count, and draw crossing edges in red.
Once that works, make it beautiful:
- Add momentum (keep a velocity per vertex and decay it each step) so it converges faster and moves like a spring net.
- Let me drag vertices with the pointer. Dragging an outer vertex should reshape the boundary while the interior follows.
- Fill each face with a soft color once the graph is planar, shading faces by how far they are from the outer face.
Explain in short code comments why the averages give a planar drawing. When you're done, tell me how to open it and suggest three directions I could take it next, such as generating bigger graphs from the convex hull of random points on a sphere, a puzzle mode where I untangle it by hand first, or comparing against a force-directed layout.
