Tiny Online Tools
ピクセル不要のノイズとグレインテクスチャ
SVG には <feTurbulence> フィルターによるノイズジェネレーターが組み込まれています。このツールは、各パラメーターを視覚的に調整し、オーバーレイや背景として使えるクリーンな独立 SVG を出力する UI を提供します。
2 種類のノイズ
- fractalNoise — タービュランスのオクターブを重ねて、柔らかく雲のような模様を作る。オーガニックなグレインや紙のような質感に最適。
- turbulence — 生のコントラスト高めのノイズで、TV の砂嵐やスタティックのような印象。グリッチ効果に最適。
コントロール
- 基礎周波数 — ノイズの細かさ。小さい値で大きく柔らかい塊、大きい値で細かい粒。
- オクターブ — 合算されるノイズ層の数。多いほど詳細に。
- シード — 再現性のための整数。同じシード = 同じ模様。
- モノクロ / カラー — モノクロは全チャンネルに選択色を掛ける、カラーは RGB ノイズをそのまま保持。
- 前景、背景、不透明度 — ノイズと背景矩形の関係を調整。
用途
- ヒーロー画像の上のグレインオーバーレイ
- レトロ TV / VHS 風グリッチ効果
- UI カードの紙・キャンバス風背景
- グラデーション上のフィルムグレイン（グレイニーグラデーションツールと組み合わせ）
- デザインシステムのビジュアルノイズ
SVG はどのサイズでもシャープで、ブラウザは表示時にピクセル単位でノイズをラスタライズ — タイルの継ぎ目もスケール時のぼやけもありません。HTML に貼り付けるか、data URI の background-image: url(...) として最小サイズで利用可能。