円を描く文字（円形テキスト）のCSSジェネレーター
入力したテキストを円形や半円に沿って配置。半径や回転角、文字の間隔を個別に調整して、円形状のタイポグラフィを作成できます。
プレビュー
<div class="circular-text-container">
{{generated_html}}
</div>.circular-text-container {
position: relative;
width: {{container_size}}px;
height: {{container_size}}px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.circular-text-container .char {
position: absolute;
display: inline-block;
font-size: {{font_size}}px;
color: {{text_color}};
font-weight: {{font_weight}};
transform: rotate(var(--angle)) translateY(-{{radius}}px) rotate({{char_rotate}}deg);
transform-origin: center;
}機能、使い方
- テキストを円形やアーチ状に沿って1文字ずつ等間隔で配置します。
- 半径や範囲、回転角度を調整することで、バッジやエンブレムのようなデザインを作成可能です。
- 「反転」を有効にすると、文字が下向きになり、円の下部に配置する場合に適した向きになります。
CSSプロパティの説明
transform: rotate()を使用して各文字の配置角度を決定し、translateY()で中心からの距離（半径）分だけ外側に移動させています。
var(--angle)はJavaScriptで事前に計算された各文字のベース角度です。
最後のrotate()は文字自体の向きを補正するために使用しています。
