円形テキスト生成ツール

円に沿った文字は、丸いロゴ、カフェのバッジ、スタンプ、ステッカー、印章デザインの基本です。このジェネレーターは1文字ずつ円に沿って配置して外向きに回転させ、下側の文字は反転させて左から右に読めるようにします。リング線を1〜2本と中央の星や文字を加えれば定番のバッジになり、すぐ使える透過PNGや、編集・拡大できるSVGとして保存できます。処理はすべてブラウザ内で行われます。

使い方

1. 上側の文字を入力し、バッジにしたい場合は下側の文字も入力します。
2. 上下の弧にするか、上側の文字を円全体に広げるかを選びます。
3. 半径、フォント、サイズ、文字間隔を設定し、回転で文字の位置を動かします。
4. リング線、中央の星や文字を加え、色と背景を選びます。
5. PNGまたはSVGをダウンロードするか、SVGコードをコピーします。

計算式

1文字あたりの角度 = (文字幅 + 間隔) ÷ r_mid · 位置 = (C + r·sin θ, C − r·cos θ)

θは真上から時計回りに測ります。r_mid は文字の帯の中央で、帯は r から r + 0.9 × 文字サイズまで（内側の文字では r − 0.9 × サイズから r まで）です。上側の文字は内側の縁に立ってθだけ回転し、下側の文字は外側の縁からぶら下がってθ − 180°だけ回転するため、正立します。円全体モードでは、余った円周を文字どうしで均等に分けます。

計算例

半径200、文字40 pxなら、帯は200〜236 pxで、r_mid = 218 pxです。幅26 pxの文字に間隔4 pxを足すと 30 ÷ 218 = 0.138 rad、約7.9°を占めるので、20文字の上側の文字はおよそ158°を覆います。両方のリングを付けると、画像は508 × 508 pxになります。外側のリングは236 + 8.8 = 244.8 pxの位置で、そこに両側で線幅の半分1 pxと余白8 pxが加わります。