SVG スターシェイプジェネレーター

純粋な SVG によるカスタムスター

星は驚くほど汎用性の高い形状 — ロイヤリティバッジ、レビュー評価、通知アクセント、ステッカー・バースト、UI ハイライトとして登場します。このジェネレーターはすべての側面を完全に制御し、SVG 内の単一のクリーンな <polygon> を出力します。

コントロール

• 角数 — 3〜20。
• 内半径比 — 各アームの尖り具合。低い値で針のように尖った星、高い値で柔らかく丸みを帯びたバーストに。
• 回転 — 星全体を任意の角度に。
• 塗りつぶし — ソリッドカラーまたは角度指定可能な 2 段線形グラデーション。
• ストローク — 任意の色付き輪郭、太さ調整可、角丸または面取り。

レンダリングの仕組み

アルゴリズムは中心の周りに外半径と内半径を交互に 2 × 角数 個の頂点を配置します。結果、どの角数でも完璧にバランスの取れた星が得られます。標準的なポリゴンなので、CSS でスタイリング、キーフレームでアニメーション、React / Vue / Solid コンポーネントに取り込み可能で、ランタイム不要。

用途

• レビュー・評価ウィジェット
• 「NEW!」「SALE」ラベルのステッカー・バースト
• ロイヤリティ＆ゲーミフィケーション バッジ
• ホリデー装飾（冬／クリスマス）
• ファビコンとアイコンデザイン
• イラストのきらめきアクセント

ネオンシェイプジェネレーターと組み合わせれば光る星、グレイニーグラデーションジェネレーターと組み合わせればテクスチャのある背景 — 結果の SVG は常に小さく、スケーラブルで、どの画面や印刷解像度でも完璧です。