svg filter だけでテクスチャアニメーションを作ってみた
- たのしいけど注意事項あり
こんなん↓
コードをチマチマ書くだけで意外といい感じになって、楽しかった。
Q. なぜこんなことを？
svg filter を使うとけっこうアグレッシブな表現ができることを、なんかの拍子で知って試したくなったから。
コードを簡単に解説
前者の粗いノイズを例にする。
<feTurbulence> でテクスチャのベースを作る
<feColorMatrix> と <animate> で遊ぶ
要するにグルグル回して単色化しているだけではある。
<feMorphology> で粗くする
参考にしたもの
いくつか実装例を見てみたりはしたが、けっきょくのところ MDN のサンプルコードが一番参考になった。 と言いつつ、この記事シリーズからもわりとアイデアをパクった: SVG noise filter — Part I. Introduction | by codebro.io | Medium
実用上の注意点
アニメーションはけっこう負荷が重い。 少なくとも CSS だけでコーディングされたアニメーションよりは明らかに重い。
Can I use ではひととおりのモダンブラウザが対応していることになっている が、実際のところブラウザによって表示がうまくいかないこともあるらしい。 上記とは別の実装をしていたときではあるが、iOS Safari でだけ表示が崩れる場合もあることを手元では確認できた。
上記のような事情もあり、これらはおそらくスポットで使うべきもので、たとえば全ページ共通の背景なんかには使わないほうが良さそう。 もともとそう使おうとしていたんだけど。