The Sector
The story behind The Sector
Inspired by Degree (angle) on Wikipedia
Built with GSAP + SVG + DOM
Techniques Programmatic SVG line generation · GSAP stroke-dashoffset animation · Click-driven phase progression · Staggered radial sweep reveals · Sector arc fills
Direction The accretion of a measurement system — each click adds another layer of subdivision, from a single circle to 360 degree marks
Result A sequential visual essay where clicking divides a circle through six phases, from one diameter to the full 360-degree protractor
The Story
A degree is one three-hundred-and-sixtieth of a full rotation. The number itself — 360 — was not derived from any geometric proof. It was chosen, most likely, by Babylonian astronomers sometime around 2000 BC. Their calendar divided the year into 360 days plus a handful of corrections. The sky turned once per year. One day, one degree. The correspondence was close enough.
But the number had a deeper convenience. 360 is extraordinarily divisible. Its prime factorization is 2 cubed times 3 squared times 5 — which means it can be evenly divided by 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 18, 20, 24, 30, 36, 40, 45, 60, 72, 90, 120, and 180. Every number from 1 to 10 divides 360 cleanly, except 7. This made it extraordinarily practical for a civilization doing arithmetic without decimal notation. You could split a circle into halves, thirds, quarters, fifths, sixths, eighths, ninths, or tenths and always get a whole number of degrees.
The Greeks inherited the convention. Hipparchus adopted it for his star catalog. Ptolemy used it in the Almagest. By the time anyone might have questioned the choice, it was already woven into every astronomical table, every navigational instrument, every surveyor’s tool. Four thousand years later, we still use their number. Not because 360 is mathematically special — because it was practically convenient, and then it became permanent.
The Take
A pale blue-grey field fills the screen. A faint cross-hatch grid, barely visible at 8% opacity, gives the surface the quality of graph paper. In the center: nothing. A small hint at the bottom reads click to divide.
The first click draws the circle. A single SVG ring animates in via stroke-dashoffset — the line sweeps around from zero to completion over 1.5 seconds. A small center dot fades in. The narrative reads: A circle. The oldest shape.
The second click cuts the circle in half. A single diameter line draws through the center, and two faintly tinted sector fills appear — one slightly more blue than the other. The counter in the top right reads 2. One cut. Two halves. The first symmetry.
The third click adds the perpendicular — a cross. Four quadrants, four fills in alternating subtle blues. The counter reads 4. Four quarters. The Babylonians mapped the sky this way.
The fourth click jumps to twelve. Eight new lines appear at 30-degree intervals, extending from an inner radius outward, slightly thinner and lighter than the cardinal lines. The counter reads 12. Twelve hours. Twelve months. Twelve always divides.
The fifth click takes it to thirty-six. New lines fill every 10 degrees, starting further from the center — only the outer portion of the radius, in a lighter steel blue. The counter reads 36. The text delivers the mathematical punch: 360 = 2 cubed times 3 squared times 5. Divisible by every number from 1 to 10, except 7.
The sixth click completes the instrument. 360 individual degree marks sweep around the circle in a staggered reveal over 2.5 seconds — a radial cascade that looks like a protractor drawing itself. Every fifth degree gets a slightly longer tick. A fine inner ring appears at 92% of the radius to separate the degree marks from the interior construction. The counter reads 360. Four thousand years later, we still use their number.
A seventh click triggers a gentle pulse — all lines briefly brighten and dim — with the final line: One day per degree. One sky for everyone.
The experience is finished. Seven clicks, seven phases, the complete journey from empty circle to calibrated instrument. No interactivity beyond the click. No animation loop. The construction stays on screen, a completed diagram, precise and still.
The Tech
SVG as Construction Medium
The entire experience is built in a single inline SVG element sized to the viewport. Every line, arc, and circle is a discrete SVG element created programmatically with document.createElementNS. This means every mark is a vector — resolution-independent, crisp at any zoom level, and individually addressable for animation. The circle uses the standard stroke-dashoffset technique for the drawing animation: set stroke-dasharray to the circumference, start stroke-dashoffset at the same value (fully hidden), then animate it to zero.
Radial Line Generation
Lines are computed from angle, inner radius, and outer radius. The createLine function converts angle to radians (offset by -90 degrees so 0 starts at the top), computes start and end coordinates using cosine/sine, and creates an SVG <line> element. Each phase defines which angles to draw and how far in from the rim they start — cardinal lines go all the way to the center, 30-degree marks start at 15% of the radius, 10-degree marks at 70%, and individual degree ticks at 88-92%. This layered depth structure gives the final diagram the visual hierarchy of an actual protractor.
GSAP Phase Animation
Each phase is a standalone function that creates its SVG elements and animates them with GSAP. The stagger effect in the final 360-degree phase is achieved by computing each line’s delay as (index / totalLines) * 2.5 seconds — a linear sweep that takes 2.5 seconds to complete the full circle. Earlier phases use per-element delays based on angle position: (angle / 360) * duration. All easing is power2.out or power1.out — smooth deceleration that gives each line a sense of being placed rather than appearing.
Sector Fills as Pie Slices
The colored sector fills in the diameter and quadrant phases use SVG path arcs. Each sector is drawn as a path that moves to center, lines to the start point on the circumference, arcs to the end point, and closes back to center — a true pie slice. The fills are extremely subtle (6-7% opacity blues) to tint the sectors without competing with the line work. They establish the division visually without turning the diagram into a pie chart.
Counter and Narrative
The division count in the top right updates with each phase and briefly highlights in blue (via a CSS class toggle with a 800ms timeout). The narrative text at bottom center uses CSS white-space: pre-line to respect the newlines in multi-line text strings. Each text appearance triggers a 5-8 second visibility window before fading out, ensuring the text is gone before the next click arrives at a natural reading pace.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.