#8

SVGフィルターで作るメタボール

Filter Effects
published on

note

複数のオブジェクトが溶け合うような滑らかな融合効果を持つ「メタボール」と呼ばれる表現を、SVGフィルターを使用して実現します。ブラー効果とコントラストの調整により、メタボール特有の有機的な形状を生成します。

SVGフィルターのfeGaussianBlurでブラー効果を、feColorMatrixでコントラストを調整し、対象となるオブジェクトにフィルター効果を適用します。CSSのfilterプロパティでも同様の効果は実現可能ですが、DOM要素に適用する場合、要素の色に予期せぬ影響を与えるなど、実用的な制約があります。また、キーフレームアニメーションと併用する際は、ブラウザによってフィルター効果が正しく適用されない場合があるため、requestAnimationFrameを使用して動的にスタイルを更新するなどの対応が必要です。

アニメーション時の特徴的な動きや形状の変化に加え、近未来的なビジュアル表現は非常に印象的です。キービジュアルの構成要素として、またはコンテンツの背景としてパターン的に配置するなど、デザインのアクセントとして効果的に活用できます。