Home▸Mathematics▸Knot Theory 2D — Crossing Diagrams & Invariants

Knot Theory 2D — Crossing Diagrams & Invariants

Rotate a projected trefoil, figure-eight, cinquefoil or torus knot and watch crossings flip between over and under as live crossing number, writhe and Alexander polynomial update.

Mathematics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-knot-theory ↗ Open standalone

This 2D companion projects the same parametric knot curves as the 3D version onto a flat canvas and detects crossings directly from the projected geometry, breaking the strand wherever it passes behind another segment — the classic knot-diagram convention. Drag to re-rotate the projection and the over/under pattern updates live, while crossing number, writhe and the Alexander polynomial stay fixed for a given knot, exactly as topological invariants should.

⚙ Under the hood

2D knot-diagram simulator: the same 5 parametric knots (unknot, trefoil, figure-eight, cinquefoil, torus T(2,5)) as the 3D version, rotated, projected and crossing-detected in plain Canvas 2D, with a live invariants table.

knot theorytrefoil knotcrossing numberwrithealexander polynomialtopology

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

Frequently Asked Questions

How does the 2D view decide which strand is "on top"?

Each point on the knot keeps the depth (z) value it had before being flattened onto the canvas. At a crossing, the strand with the smaller depth is drawn continuously and the other is given a small gap — the same convention used in every hand-drawn knot diagram.

Why do the invariants stay the same while I rotate the knot?

Crossing number, writhe (for a fixed diagram orientation) and the Alexander polynomial are topological invariants of the knot itself, not of the particular diagram. Rotating changes which crossings you can see and their apparent layout, but not the underlying knot, so the invariant values shown in the panel do not change.

What did you find?

Add reproduction steps (optional)