#8
SVGフィルターで作るメタボール
Filter Effects
published
on
note
複数のオブジェクトが溶け合うような滑らかな融合効果を持つ「メタボール」と呼ばれる表現を、SVGフィルターを使用して実現します。ブラー効果とコントラストの調整により、メタボール特有の有機的な形状を生成します。
SVGフィルターのfeGaussianBlurでブラー効果を、feColorMatrixでコントラストを調整し、対象となるオブジェクトにフィルター効果を適用します。CSSのfilterプロパティでも同様の効果は実現可能ですが、DOM要素に適用する場合、要素の色に予期せぬ影響を与えるなど、実用的な制約があります。また、キーフレームアニメーションと併用する際は、ブラウザによってフィルター効果が正しく適用されない場合があるため、requestAnimationFrameを使用して動的にスタイルを更新するなどの対応が必要です。
アニメーション時の特徴的な動きや形状の変化に加え、近未来的なビジュアル表現は非常に印象的です。キービジュアルの構成要素として、またはコンテンツの背景としてパターン的に配置するなど、デザインのアクセントとして効果的に活用できます。