SVG ネオンシェイプジェネレーター

SVG に直接焼き込まれたネオングロー

ネオン発光はデザインの定番で、他にほとんど何もなくても温かみ、レトロフューチャー、ムードを演出します。このジェネレーターは、輪郭のコピーをぼかしてマージする <filter> を内蔵した単一の SVG を出力し、シャープなストロークの周りに現実的なブルームを生み出します。

対応シェイプ

• 円、四角、角丸矩形
• 三角形、五角形、六角形、八角形
• 5 角星・6 角星

コントロール

• ストロークの色 — ネオンの芯。彩度の高い色ほどよく光ります。
• ストロークの太さ — 光る線の太さ。
• グローのサイズ — ガウシアンブラーの stdDeviation。大きいほど柔らかな光輪。
• 背景 — 暗い背景がネオンを際立たせます。#000 に近いものを。

グローの仕組み

SVG 内部で <filter> が 2 つの異なる半径で <feGaussianBlur> を 2 回実行し、ぼかされたコピーを <feMerge> で元のシェイプと合成することで、明るい芯と柔らかな光輪 — 実際にネオンを撮影したときのルック — が得られます。

グローは SVG フィルターで実装されているため（画像ではない）、瞬時に色を変え、ロスレスで拡大縮小し、CSS でストロークをアニメーション可能。ファイル全体は通常 1 キロバイト未満。

用途

• サイバーパンクのヒーローセクションやランディングページ
• アーケード風 UI 要素
• レトロポスターやアルバムジャケット
• アクセントアイコン付きの夜間モードダッシュボード
• ゲームオーバーレイやストリーマーアセット

グレイニーグラデーションまたはメッシュグラデーションジェネレーターと組み合わせてムードのある夜空を作り、真ん中にネオンの星を置けば主役が完成。