SVGフィルターで作るノイズとセピアのレトロ調フィルムエフェクト

note

SVGフィルターを3段階に連結し、コントラストを抑えたセピア色調の上にフィルムグレインのようなノイズを重ねたレトロ調エフェクトです。ノイズはフレームごとに異なるパターンへ切り替わり、往年のフィルム映像を思わせる粒状感が生まれます。このサンプルではチェックボックスでエフェクトのon/offをリアルタイムに切り替えられます。

フィルターは、feComponentTransferによるコントラスト抑制、feColorMatrixによるセピア色調変換、feTurbulenceを使ったノイズ合成の3つをfilterプロパティに順番に指定し、前段の出力が次のフィルターのSourceGraphicとして渡される仕組みにしています。コントラスト抑制では、slopeとinterceptを組み合わせて黒を持ち上げ、全体をフォギーな質感に整えています。セピア変換にはW3C標準の色変換行列を使い、RGBの各チャンネルを茶褐色寄りに再重み付けしています。

ノイズアニメーションは、一部ブラウザの制約への対応として、異なるseed値を持つノイズフィルターをあらかじめ複数個定義しておき、requestAnimationFrameで一定時間ごとに参照するfilterのIDを切り替える方式を採っています。また、seedの分布はゴールデンレシオ法（i × 137.508 % 1000）で均等に散らし、繰り返しパターンが目立たないようにしています。

写真やポートフォリオのヒーロー画像へのレトロ加工、ホバー時にエフェクトを重ねるインタラクション演出、ビンテージ調のUI表現に向いています。粒感の粗さや強度を変えられるため、淡いフィルムライクな質感からコントラストの高い砂嵐表現まで幅広く応用できます。