Interactive sandbox for triangle/rectangle/hexagon morphs. Each variant tests a different combination of geometric corner rounding (Bézier arcs at each vertex) and the thick-stroke round-cap trick (sharp geometry, rounded silhouette).
Each shape carries its own cornerRadius, so the morph interpolates roundness alongside position. A sharp-cornered triangle that morphs into a rounded hexagon visibly inflates its corners during the same motion that pulls new vertices outward. This is the museum’s “crispy sphere face → rounded card” transition writ small.
sharp tri ↔ rounded hex
sharp triangle
sharp tri ↔ rounded rect (card)
sharp triangle
sharp hex ↔ rounded rect (card)
sharp hexagon
rounded tri ↔ sharp hex
rounded triangle
sharp tri → sharp rect → rounded hex
sharp triangle
sharp tri → rounded rect → rounded hex → rounded tri
sharp triangle
hollow: sharp tri ↔ rounded hex
sharp triangle
hollow + round-cap: sharp tri ↔ rounded hex
sharp triangle
A single cornerRadius applied to all shapes in the cycle (override mode). Useful baseline for comparing techniques.
sharp, no stroke cap
sharp triangle
rounded corners (Bézier)
rounded triangle
sharp + stroke round-cap
sharp triangle
rounded + stroke round-cap
rounded triangle
sharp, no stroke cap
sharp triangle
rounded corners (Bézier)
rounded triangle
sharp + stroke round-cap
sharp triangle
rounded + stroke round-cap
rounded triangle
Same shapes, same techniques, but fill="none". Lets you see the actual path geometry. The thin-outline variants also render every topology point as a small dot so you can watch mid-edge synthetic points migrate to corners during morph.
sharp outline + vertex dots
sharp triangle
rounded outline + vertex dots
rounded triangle
sharp, fat round-cap stroke
sharp triangle
rounded, fat round-cap stroke
rounded triangle
sharp outline + vertex dots
sharp triangle
rounded outline + vertex dots
rounded triangle
sharp, fat round-cap stroke
sharp triangle
rounded, fat round-cap stroke
rounded triangle
lcm(sides)path points so the morph is a clean linear interpolation. For a triangle in a 6-point topology, the 3 “missing” corners sit at the midpoints of the triangle’s edges (visually invisible). When morphing to the hexagon, those midpoint markers pull outward to become the hexagon’s corners.M/L/Z commands. Corners are pointy. Lowest visual cost; most crystalline.Q arc instead of going straight through. Corner radius is capped to half the adjacent edge length to prevent overlap on small shapes.paint-order: stroke fill with stroke-linejoin: round and stroke-linecap: round. The result is a rounded silhouette around the geometric polygon. Cheap, doesn’t require Bézier authoring, but the rounding radius is hostage to stroke-width.