LoginSignup
35

More than 5 years have passed since last update.

SVGフィルタ サンプル集

Last updated at Posted at 2016-09-25

SVGのフィルタとは

お絵かきソフトでよくある、画像に特殊効果をかけられるみたいなやつです。効果をかける対象はSVG要素に限らず、DOM要素ならなんでも効果の対象にできます。
有名どころでは以下のようなフィルタがあります。

ぼかし

<feGaussianBlur>
image
Demo http://codepen.io/tanishi/pen/LRWBJd
Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

色の変換

<feColorMatrix>
image
Demo http://codepen.io/tanishi/pen/RGpBEE
Docs https://developer.mozilla.org/ja/docs/Web/SVG/Element/feColorMatrix

image
Demo http://codepen.io/tanishi/pen/PGpXdN


このように、フィルタは単体で使っても十分強力です。
でも組み合わせて使うことでさらに面白い効果をかけられます。

組み合わせたフィルタ

ゆがみ

<feTurbulence> + <feDisplacementMap>
image

Demo http://codepen.io/tanishi/pen/LRWrbX
Docs :one: feTurbulence :two: feDisplacementMap

微妙に形が異なる軽度のゆがみを次々に適用していくことで、輪郭がジマジマする味のある効果が作れます。

(css-tricksから引用)
https://css-tricks.com/squigglevision-in-css-and-svg/
__360.gif

引き合う境界線

<feGaussianBlur> + <feColorMatrix>
c.gif
Demo https://codepen.io/tanishi/pen/vXgKkv
Docs :one: feGaussianBlur :two: feColorMatrix


他にも面白い効果がかけられるフィルタがあれば教えてください。追記していこうと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35