フリーのドローソフト「Inkscape」を使用して、色々な種類のフィルター機能を試してみます。
Inkscape
Inkscape（インクスケープ）はオープンソースで開発されているベクトル画像編集ソフトウェア（ドローソフト）。Inkscape はXML、SVG、CSS などの標準に完全に準拠したグラフィックツールとなることを目標としている。
使用するイラスト
今回の作業で使用するイラストです。
下図のイラストにInkscapeのフィルタを適用します。
© Unity Technologies Japan/UCL
フィルタの適用
画像を Inkscape で開いたら「選択ツール」でオブジェクト(画像)を選択します。
上部メニュー「フィルター」をクリックするとカテゴリ別にフィルタ名が表示されるので、オブジェクトに適用します。
フィルターカテゴリ「バンプ」
バンプ
バンプ (bump) は英語で「こぶ」「隆起」「衝突」などを意味する単語。
1. アルミホイル
２種類の照明としわくちゃを組み合わせた金属箔のエフェクトです。
2. しっくい・色付き
漆喰(つや消し及びしわくちゃの表面エフェクトとHSLエッジ検出バンプの組み合わせ)の色付きです。
3. ベルベットバンプ
ベルベット
ベルベット（英: velvet）は、平織か綾織の経糸にパイルを織り出したパイル織物の一種である。ビロード（ポルトガル語: veludo、スペイン語: velludo）や天鵞絨（てんがじゅう）、とも呼ばれる。柔らかで上品な手触りと深い光沢感が特長で、フォーマル・ドレスやカーテンに用いられる。
ベルベットのような滑らかなバンプをつけます。
フィルタの組み合わせ
上記フィルタを適用した状態から、さらに別のフィルタを適用します。
アルミホイル + 鉛筆
鉛筆(フィルターカテゴリ / イメージペイントとドロー)
色の境界を検出し、グレースケールでトレースします。
しっくい・色付き + 影を落とす
影を落とす(フィルターカテゴリ / 光と影)
色可変な影を落とします。
下図サンプルでは「オブジェクトの色を使う」にチェックを入れてフィルタを適用しました。
ベルベットバンプ + 羽毛
羽毛(フィルターカテゴリ / ぼかし)
中身を変更せずにエッジにぼかしマスクをかけます。
Anime.js Sample
アニメーションのライブラリ「anime.js」を使用したSVGアニメーションのサンプルです。
下絵には「アルミホイル + 鉛筆」で作成した画像を使用しています。
