Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
32
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

SVGフィルタ サンプル集

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


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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
32
Help us understand the problem. What are the problem?