What Is the Hopf Fibration?
The Hopf fibration organizes the 3-sphere (S³) into circles called fibers. Each point on an ordinary sphere (S²) corresponds to one of these circles, and every pair of fibers is linked exactly once. Projecting the fibers into 3D makes this linking visible.
Launch the visualizer to view a selection of fibers from different angles. Start with a small fiber count so you can follow individual rings, then increase it to see the larger structure.
Mathematically, this is a continuous map from S³ to S²:
The map takes pairs of complex numbers on the unit 3-sphere and sends them to points on the 2-sphere via the ratio z₁/z₂. Points that differ only by a phase factor (multiplication by e^(iθ)) map to the same point on S². That phase freedom traces out the circles.
The Hopf fibration is a topological structure rather than a fractal: its fibers are smooth circles, without the repeating detail at smaller scales found in fractals.
Stereographic Projection: Why One Fiber Becomes a Line
The 3-sphere lives in four-dimensional space. Stereographic projection maps it into ordinary 3D space, leaving out one chosen point called the projection point.
Fibers that avoid this point project to circles. Exactly one fiber passes through it; removing the point and projecting the rest turns that circle into an infinite straight line. Restoring the missing point at infinity closes the line back into a circle on S³.
The fibers over any circle on S² form a torus. So the whole structure is nested tori, each one threaded through the others. In our visualizer, each fiber is drawn as a torus mesh rather than a bare circle, which makes the linking visible at a glance.
As you move around the base sphere (S²), you're selecting which fiber to highlight. Nearby points on S² correspond to nearby circles in S³, so smooth movement on the sphere produces smooth deformations in the fiber structure.
The Linking
The linking property is what first drew attention to this object. Take any two fibers. They pass through each other's interior exactly once, and this holds for every pair. This is a topological invariant, which means it survives any continuous deformation of the structure. You can stretch and bend the fibers however you want, and they stay linked.
This also means the fibers can morph smoothly into their neighbors while keeping their topology intact. That's why fibers in the animations never tear or cross.
Technical Implementation
Unlike the other visualizations on this site, which use ray marching on the GPU, the Hopf fibration is built from Three.js mesh geometry. Each fiber is a torus mesh with per-vertex lighting. This is a geometry problem, not a shader problem, so standard 3D rendering works better here than distance field methods.
Exploring It
Orbits the camera around the fiber bundle. Good for getting a sense of the overall structure and how the tori nest inside each other.
Varies the twist parameter so fibers deform continuously. Watch the linking: it never breaks.
Adds and removes fibers over time. Start with a few to see the linking clearly, then let it fill in.
Full manual control with WASD/QE or touch. Fly around the structure yourself.
History
Heinz Hopf described this fibration in 1931 while studying homotopy groups of spheres. The question he answered: is the map from S³ to S² always contractible (shrinkable to a point)? Before Hopf, most mathematicians assumed yes. Hopf showed it wasn't. His fibration was a counterexample, and it became the first known non-trivial fiber bundle.
That discovery opened up the field of fiber bundles in topology. The idea that you can decompose a complicated space into a "base" and "fibers" over each point became a central tool in 20th century mathematics and physics. Gauge theories in particle physics use fiber bundles. So do quaternion rotations in computer graphics. The Hopf fibration is the simplest non-trivial example of all of them.
Tips
Start with 8-12 fibers. The linking is hard to see when the structure is dense. Once the pattern clicks, increase the count.
Try the twist morphing animation and watch two specific fibers. They'll deform, but they'll stay linked.
The colors map to positions on S². Fibers with similar colors are "nearby" on the base sphere. Opposite colors are far apart. This makes the torus structure visible: fibers of one color family group together on a single torus.
Further Reading
- Niles Johnson's Hopf Fibration Video: the best visualization of the fibration available, rendered with Sage and Tachyon.
- Wikipedia: Hopf fibration, a thorough treatment of the algebra and topology, with good diagrams.
- "An Elementary Introduction to the Hopf Fibration" by David W. Lyons, an undergraduate-accessible paper using quaternion algebra to build intuition.