Segment geometry and colours
A spinning wheel makes two separate things happen: a draw and a drawing. The draw is the pick — a cryptographically uniform choice of one index from your list, made before anything moves. The drawing is everything your eyes get: the circle divided into segments, the colours, the pointer, and the rotation that settles onto the winner. This guide covers the drawing — how the engine turns a list into angles and colours — and the fact that follows from keeping the two apart: nothing in the picture changes the odds. For the draw itself, read how the wheel picks a winner.
Every angle, percentage, count and colour below is computed at build time by the engine that
runs the wheels, from the preset lists and from short example lists written for this guide.
Scripted bytes make the example spins reproducible; live spins draw from
crypto.getRandomValues.
N entries, N equal segments
A wheel of N entries is divided into N segments of 360/N degrees each, in list order, running clockwise from the pointer at the top of the wheel. The first entry owns the segment that begins at the pointer, the second follows it clockwise, and the last entry ends where the first began. There is no sorting, grouping or resizing: the order you typed is the order on the circle.
Each boundary is computed as a multiple of the whole — the index multiplied by 360, then divided by N — rather than by adding a rounded step repeatedly. That matters when N does not divide 360 evenly. A 7-chore list gives segments of 51.43° each; segment 4 starts at 154.29° and ends at 205.71°, and the last segment ends at exactly 360°, closing the circle with nothing left over and nothing overlapping. The automated tests pin exact start, end and midpoint angles for small wheels and check that the arc widths add up to 360 at sizes up to the 100-entry cap.
A worked wheel, boundary by boundary
Here is the segment list the engine produces for a 5-stop errand run: each segment's position, label, start and end angles, the midpoint the pointer lands on when it wins, and its colour. Every segment spans 72° and wins with probability 20%.
| Position | Entry | Start | End | Midpoint | Colour |
|---|---|---|---|---|---|
| 1 | Post office | 0° | 72° | 36° |
#7e22ce
|
| 2 | Pharmacy | 72° | 144° | 108° |
#2563eb
|
| 3 | Library | 144° | 216° | 180° |
#047857
|
| 4 | Hardware store | 216° | 288° | 252° |
#b45309
|
| 5 | Bakery | 288° | 360° | 324° |
#dc2626
|
Read the table as a description of the picture, not of the odds: start and end are painted boundaries, the midpoint is where the wheel stops if that entry wins, and the colour is cosmetic. Only the number of rows speaks to fairness, because the draw ranges over exactly that many indices.
The midpoint is where the pointer lands
When you press Spin, the engine draws an index, looks up that segment, and hands the presentation layer three things: the winning index, its label and a target angle, which is that segment's midpoint. The animation rotates the wheel until the midpoint sits under the pointer. That is why a standard spin does not stop on a line: boundaries exist so the eye can tell segments apart, and a standard spin finishes with the wheel resting on the winner's midpoint. The pointer does rest on a seam in other states. Before the first spin the wheel is drawn from its start, with the first segment beginning at the pointer. In eliminator mode the spin decelerates onto the eliminated entry — or skips the rotation under reduced motion — and the wheel is then redrawn from its start for the reduced list in the same step, so between eliminations the pointer sits on the seam between the last survivor and the first, not on a midpoint; switching eliminator mode off returns the wheel to its start as well. None of these resting positions is a result: the result box is the record.
A scripted spin makes the sequence visible. Run the errand wheel with the bytes 6 and 2 scripted into the engine's byte source. It asked for bytes 2 times in all: the first candidate was masked and rejected for falling at or beyond the list length (1 rejection), and the next was accepted. The accepted value is index 2, "Library", and the target angle returned is 180° — the midpoint from the table, confirmed equal at build time. The same on the 2-face coin wheel with one scripted byte: 1 request, index 1, "Tails", target 270°, the middle of a segment running from 180° to 360°.
The angle is an output of the pick, never an input to it: the engine chooses a segment and reports the angle, not the reverse. Under reduced motion the roughly four-second rotation is skipped: the wheel is placed directly at the winner's midpoint and the identical draw is announced immediately.
Arcs and probabilities across the preset wheels
The preset wheels run from 2 entries up to 50, and the Number Wheel can be set to the 100-entry cap. Because every segment is 360/N degrees and every entry wins with probability 1/N, arc and probability are the same fraction of their wholes; both columns come from the segment count the engine reports for each preset.
| Wheel | Entries | Arc per segment | Chance per entry |
|---|---|---|---|
| Coin Flip Wheel | 2 | 180° | 50% |
| Dice Wheel | 6 | 60° | 16.67% |
| Zodiac Wheel | 12 | 30° | 8.33% |
| Letter Wheel | 26 | 13.85° | 3.85% |
| Wheel of US States | 50 | 7.2° | 2% |
| Number Wheel at its maximum | 100 | 3.6° | 1% |
Every preset is a starting list, and editing it re-divides the whole circle. The Wheel of US States loads 50 names on 7.2° segments at 2% each. Add one entry — a wildcard line, say — and the engine reports 51 segments of 7.06° at 1.96% each. Nothing kept its old width, because there are no old widths — only a fresh division of 360 by the new count. The Number Wheel shows the other direction: its maximum control regenerates the list, so a smaller range widens every segment at once.
Duplicates are the one way to make a label wider, and they do it honestly. With the duplicate switch off, "Tea", "Coffee", "Coffee" is a 3-segment wheel of 120° slices in which Coffee owns 2 segments and so a 66.67% chance, against a 33.33% chance for Tea. That is not a weighted wheel in disguise; it is the same uniform draw over 3 indices, 2 of which carry the same word. With the switch on, the parser keeps the first occurrence only.
The 8-colour palette and how it cycles
Segments are painted from a fixed palette of 8 colours, assigned in list order; once the palette runs out the cycle restarts. The colours were chosen so that neighbours contrast and white label text stays readable on each. In the order the engine uses them:
-
Colour 1:
#7e22ce -
Colour 2:
#2563eb -
Colour 3:
#047857 -
Colour 4:
#b45309 -
Colour 5:
#dc2626 -
Colour 6:
#0e7490 -
Colour 7:
#db2777 -
Colour 8:
#4d7c0f
Colour is keyed to position, not content: move an entry from third place to ninth and its colour changes. Any wheel with more than 8 entries must repeat colours, and a repeated colour carries no meaning — it does not group entries, mark a favourite or merge two outcomes. On the 100-entry number wheel each colour appears many times, and every one of those slivers is a separate index with its own 1% chance.
The last/first adjacency rule
Plain cycling has one visual flaw. Because the circle closes, the last segment sits beside the first. Whenever the entry count leaves a remainder of 1 after dividing by 8, the cycle hands the last segment the first colour, and two touching segments read as one wide one. The engine corrects exactly that case: when the wheel has more than one entry and the last index would take the first colour, the last segment is painted with the second palette colour instead. No other segment is affected, and the rule fires on no other count.
A 9-entry chore list shows it. The first segment is #7e22ce. The palette is used up after segment 8, so plain cycling would start over and paint segment 9, the last, #7e22ce — the same as segment 1, which it touches. The engine instead reports #2563eb for it, so "Car wash" and "Dishes" no longer share a colour across the seam. Among the presets, the 25 icebreaker questions on the Question Wheel also leave a remainder of 1: question 9 wraps to #7e22ce, the same as question 1, harmlessly, since they do not touch, while the last question is painted #2563eb rather than #7e22ce. The 50 states leave a remainder of 2, so the rule stays quiet: the last state's natural colour, #2563eb, already differs from the first state's #7e22ce. None of this touches the draw — the rule changes one fill colour and leaves every angle, index and probability as they were.
A sliver is exactly as likely as a half-circle
Put the two ends of the size range side by side. On the 100-entry number wheel each segment is a 3.6° sliver with a 1% chance. On the 2-face coin wheel each segment is a 180° half-circle with a 50% chance. The sliver is exactly as likely as every other sliver on its wheel, and the half-circle exactly as likely as the other half on its wheel — in both cases 1/N, and in both cases fixed by N, the count the draw ranges over, before a single degree was computed. As the methodology page puts it, probability comes from the draw, not the drawing.
The scripted 100-entry spin makes it concrete. With the bytes 250 and 63 scripted in, the engine asked for bytes 2 times — 1 candidate was masked and rejected for landing at or beyond the list length — and returned index 63, the entry "64", with a target of 228.6°. That angle is the midpoint of a segment running from 226.8° to 230.4°, looked up after the index existed. The width of the segment never entered the arithmetic that chose it.
This is also why a crowded wheel is not a less fair wheel. On the full 100-number wheel the labels are drawn small and the result box is the practical way to read a spin; the geometry got crowded, and the draw did not notice.
Common misreadings
- "It stopped right on the line." A standard spin finishes resting on the winner's midpoint, and the result box is the record. The pointer sits on a seam before the first spin, between eliminations — when the wheel is redrawn from its start for the reduced list — and after eliminator mode is switched off, and none of those positions is a result.
- "That segment looks bigger." Every segment is 360/N degrees; a label that seems to own more is either a duplicate entry, which genuinely does, or an illusion of colour and label length.
- "Same colour, so they are linked." Colour repeats because the palette has 8 entries and a wheel holds up to 100. Each segment is its own index.
- "The wheel remembers where it stopped." A standard spin starts its rotation from wherever the wheel was resting — after an earlier standard spin, the last winner's midpoint. In eliminator mode the first spin starts from wherever the wheel was when the mode was switched on, and every later one from the wheel's start, because the wheel is redrawn there after each elimination. Either way the next draw takes no input from angles, previous spins or timing.
Related reading
The draw these segments illustrate is explained step by step in how the wheel picks a winner, and the full mechanism is on the methodology page. To watch the geometry change, edit the list on the Wheel of US States or set a new maximum on the Number Wheel; more guides are under Guides.
Frequently asked questions
Why does a finished spin stop in the middle of a segment rather than on a line?
Because the engine picks an index first and then rotates the wheel so that segment's midpoint sits under the pointer. On the 5-errand example a win for "Library" stops at 180°, not at its boundaries at 144° and 216°. That holds for a standard spin. The pointer rests on a seam in other states: before the first spin, when the first segment begins at the pointer; between eliminations in eliminator mode, when the wheel is redrawn from that start for the reduced list; and after eliminator mode is switched off, which returns the wheel to its start.
Is a segment that looks bigger more likely to win?
No. Every segment is 360/N degrees and wins with probability exactly 1/N, because the pick is drawn by index before any geometry is consulted. To make one option come up more often, list it more than once with the duplicate switch off: "Tea", "Coffee", "Coffee" gives Coffee 2 of 3 segments and a 66.67% chance.
Why do two segments share a colour?
The palette holds 8 colours and cycles through them in list order, so any wheel with more than 8 entries repeats colours. Colour is decoration keyed to position; two segments painted alike are separate outcomes with 1/N each.
Why is the last segment sometimes a different colour from the pattern?
When the entry count leaves a remainder of 1 after dividing by 8, plain cycling would paint the last segment the same as the first, and those two touch. The engine gives the last segment the second palette colour instead. A 9-entry list triggers it (last segment #2563eb rather than #7e22ce), as does the 25-question preset; the 50-state preset does not, because its remainder is 2.
Do the angles change when I edit the list?
Yes — every arc is recomputed from the new count. The 50 states sit on 7.2° segments at 2% each; add one entry and all 51 segments shrink to 7.06° at 1.96% each. Removing an entry widens the rest. The draw is unchanged: a uniform pick over the current list.
Where does the first entry sit, and which way do segments run?
The first entry starts at the pointer at the top of the wheel, and segments run clockwise in list order, with angles measured clockwise from the pointer. On a 5-entry wheel the first segment spans 0° to 72° and the last ends at exactly 360°.
For fun and tie-breaks: the geometry is for the eyes and the draw is fair, but the wheel cannot know your situation — do not delegate consequential decisions to it. Everything runs locally in your browser; see the methodology page for how the draw works.