SVGフィルターで作る色収差と走査線のグリッチエフェクト

note

SVGフィルターで、まず彩度を下げた画像にRGBを分離してずらす色収差を重ね、一定間隔でだけ横走査線風の変位を加えるグリッチエフェクトです。走査がオフのあいだは弱い色収差のみが常時かかり、走査がオンになった区間だけオフセットを強めた色収差と横スキャン用フィルターを連結します。このサンプルではチェックボックスでエフェクトのon/offをリアルタイムに切り替えられます。

フィルターは、feColorMatrixによる彩度の低下、色収差用のfeColorMatrixとfeOffsetとfeBlend（screen）、走査用のfeTurbulenceとfeDisplacementMapを、filterプロパティに順番に指定しています。色収差は赤・緑・青をそれぞれ行列で抜き出し、赤と青を左右対称にfeOffsetでずらしてからscreenで合成する構成です。走査線はfeTurbulenceのbaseFrequencyをY方向のみ変化させて横帯のマップを作り、feComponentTransferで緑と青を0.5に固定してfeDisplacementMapの縦方向変位を抑え、横方向だけがずれるようにしています。

走査パターンの切り替えは、一部ブラウザの制約への対応として異なるseedのフィルターを複数定義し、requestAnimationFrameでプレイ時間中だけ一定間隔ごとに参照するfilterのIDを進める方式です。タイムラインはpauseとplayの二相で、pause中は低彩度と弱い色収差のみ、play中は強い色収差と走査用フィルターを重ねます。オフセットの強さも含めて別IDのフィルター定義を切り替える方針にしています。

ヒーロー画像やサムネイルへの軽いグリッチ演出、動画風のインターバル演出、ホバーやローディングに合わせた一瞬のノイズ表現に向いています。変位のscaleや走査の周波数、pause/playの長さを変えれば、さりげない揺らぎから強いデータ破損風まで調整できます。