A backgammon board drawn and animated in pure SVG — no canvas, no WebGL, no external dependencies beyond a single JavaScript file. The board lives in the browser; nothing touches a server.
Circular layout. The 24 points are arranged around a clock face rather than the traditional rectangular board. Checkers stack inward toward the hub, and the bar runs as a horizontal band across the centre.
Dice and autoplay. Click Roll to get a pair of dice, then click a point or checker to move. Autoplay button plays both sides automatically so you can watch a game run to completion.
Implementation. The entire game — board geometry, checker rendering, move validation, dice, and UI — is in rogammon.js, a single self-contained script with no build step. SVG elements are created with document.createElementNS and positioned with trigonometry derived from the point angle formula:
| |
where θ₀ = 277.5° places the gap between points 6 and 7 at 3 o’clock.