粒子グラデーションのSVGフィルタージェネレーター
モダンなSaaSサイトで人気、ザラついた質感を持つ粒子グラデーション（Grainy Gradient）のSVGフィルターのグラデーション背景を生成します。
プレビュー
<!-- 1. フィルターSVG -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<filter id="grainyFilter" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox">
<!-- A. ノイズを生成 -->
<feTurbulence baseFrequency="{{noise_freq}}" stitchTiles="stitch" result="NOISE" />
<!-- B. 不透明度を調整 -->
<feComponentTransfer in="NOISE" result="OPAQUE_NOISE">
<feFuncA type="linear" slope="{{noise_opacity}}" />
</feComponentTransfer>
<!-- C. 形状（SourceGraphic）でノイズを切り抜く -->
<feComposite in="OPAQUE_NOISE" in2="SourceGraphic" operator="in" result="CLIPPED_NOISE" />
<!-- D. 切り抜かれたノイズを重ねる -->
<feBlend in="SourceGraphic" in2="CLIPPED_NOISE" mode="overlay" />
</filter>
</svg>
<!-- 2. 適用対象の要素 -->
<div class="grainy-target">
<!-- コンテンツ -->
</div>/* 対象のスタイル */
.grainy-target {
width: {{container_width}};
height: 400px;
border-radius: {{radius}};
overflow: hidden;
background: linear-gradient(135deg, {{clr1}} 0%, {{clr2}} 50%, {{clr3}} 100%);
/* フィルター適用 */
filter: url(#grainyFilter);
}機能、使い方
- 汎用的なフィルター定義:SVGを質感を定義するための「フィルター」として設計しているため、既存のあらゆるHTML要素にCSS一行で粒子感を付加できます。
- 絶対的な形状追従:フィルター内部で元の要素の描画結果（SourceGraphic）を参照して合成するため、正円や角丸などの形状から粒子がはみ出すことはありません。
- 解像度に依存しない精細さ:ブラウザのレンダリング領域に合わせて動的に処理されるため、レスポンシブなサイズ変更や高解像度ディスプレイでも常に鮮明な粒子が表示されます。
プロパティの説明
filter: url(#id)プロパティを使用することで、CSSで描画した背景とSVG定義の高度なフィルターをシームレスに結合しています。
SourceGraphicはフィルター適用対象の元の描画イメージを指し、これとノイズを合成することで、複雑な背景デザインに対してテクスチャを後付けで付加することが可能になります。
feCompositeのoperator="in"属性は、生成したノイズを対象要素の不透明な領域（形状）で正確に切り抜き、はみ出しを防ぐために使用されています。
filterUnits="objectBoundingBox"の設定により、要素の物理サイズに関わらず、常に描画領域全体をカバーした正確なフィルター処理を保証しています。
