SVG に直接焼き込まれたネオングロー
ネオン発光はデザインの定番で、他にほとんど何もなくても温かみ、レトロフューチャー、ムードを演出します。このジェネレーターは、輪郭のコピーをぼかしてマージする <filter> を内蔵した単一の SVG を出力し、シャープなストロークの周りに現実的なブルームを生み出します。
対応シェイプ
- 円、四角、角丸矩形
- 三角形、五角形、六角形、八角形
- 5 角星・6 角星
コントロール
- ストロークの色 — ネオンの芯。彩度の高い色ほどよく光ります。
- ストロークの太さ — 光る線の太さ。
- グローのサイズ — ガウシアンブラーの
stdDeviation。大きいほど柔らかな光輪。 - 背景 — 暗い背景がネオンを際立たせます。
#000に近いものを。
グローの仕組み
SVG 内部で <filter> が 2 つの異なる半径で <feGaussianBlur> を 2 回実行し、ぼかされたコピーを <feMerge> で元のシェイプと合成することで、明るい芯と柔らかな光輪 — 実際にネオンを撮影したときのルック — が得られます。
グローは SVG フィルターで実装されているため(画像ではない)、瞬時に色を変え、ロスレスで拡大縮小し、CSS でストロークをアニメーション可能。ファイル全体は通常 1 キロバイト未満。
用途
- サイバーパンクのヒーローセクションやランディングページ
- アーケード風 UI 要素
- レトロポスターやアルバムジャケット
- アクセントアイコン付きの夜間モードダッシュボード
- ゲームオーバーレイやストリーマーアセット
グレイニーグラデーションまたはメッシュグラデーションジェネレーターと組み合わせてムードのある夜空を作り、真ん中にネオンの星を置けば主役が完成。
Tiny Online Tools







