五度圏表のSVGフリー素材を作ったので配布します
こんにちはこんにちは❣ ぼくれるちゃん❣
ちょっと五度圏表の素材が欲しくなったので自作しました。
せっかくなので、SVG描画用に作ったJavascriptもあわせてWTFPL（≒パブリックドメイン）で配布します。なお、配布物にはヤミマキさんのアイコンは描かれていません。
SVG（2100x2100）
SVG形式のものはこちら。4K対応の2100x2100サイズ。
SVGなのでイラレ、クリスタ、Photopeaその他でベクタ形式画像として読み込めます。ブラウザでも開けてテキストエディタでも編集できます。フォント変えるぐらいだったらテキストエディタで置換するほうが楽だと思う。
PNG（1050x1050）
PNGでそのまま使いたい人はこちら。フルHD対応の1050x1050サイズ。
Notoフォントをラスタライズしているのでパブリックドメインにはできませんが、そちらのライセンス（SIL Open Font License 1.1なのでほとんど制約なし）に抵触しない限りご自由にお使いください。
おまけ：特定キー用のオーバーレイ
上の五度圏表にブレンドモード「乗算」で重ねると、そのキーにおけるトニック（マイナー）が赤、ドミナント（マイナー）が青、サブドミナント（マイナー）が黄色で塗られます。
シャープ系のキーは♯の個数×30°右に回し、フラット系のキーは♭の個数×30°左に回して重ねれば良いです。
だいぶやっつけですが。。
SVG出力に使ったJavascript
フォントサイズその他一切を、五度圏表全体の半径からの相対値で指定しているのでサイズ変更は楽だと思います。
ちなみにSVGのファイルへの保存は、Edgeの開発者ツールで<svg>要素のouterHTML（HTMLとは言っていない）をぶっこ抜いてテキストエディタに貼り付けてます。
どうでもいい基礎数学上の余談
円周上の点のXY座標の求め方ですが。
中心O(x=0,y=0)、半径rの円周上において、
円周とX軸との交点P(r, 0)と、
円周上の任意の点Qについて、線分OPと線分OQとの角度がθであるとき。
点QのX座標は r × cos θ、Y座標は r × sin θ になります。
中心が(0,0)でないときはx,yそれぞれに中心点のx,yを加えてやれば良いです。
（数学ではY軸は上側がプラスですが、コンピューターグラフィックスでは基本的にY軸は下側がプラスなので、後者はθの回転方向が逆回しになることに注意）
円を12等分する線は上の式でθを15度（=1/12π）から始めて30度（=1/6π）ずつずらした点と中心点を結べば引けますし、文字の位置も同じように計算できます。
そんじゃーね。