Interactive Diagram: 12-TET Geometry

With the interactive diagram above you can generate geometrical figures for scales and chords in 12-tone equal temperament. Have a look at these examples and this page to see how it works. (Best viewed on Firefox.¹)

• Click on the symbols to select or deselect notes.
• Hold Ctrl and click to highlight a note (for example, the root note of a chord).
• Click P5 or m2 to switch between chromatic (minor seconds) and fifths mode.
• Click Save to download your diagram as SVG.
• Click Reset to start from scratch.
• Use the arrow buttons to rotate the chromatic circle.

Maybe this can help to illustrate some music theory (or abstract algebra, introducing cyclic groups 😀), I'm not sure. Let me know if you found a nice use case.

¹ Chrome adds some ugly extra space before the flat symbol.