SVGの良いところは画像と異なりバイナリではないので解析すれば様々な利用法が考えられる点にあります。単純にブラウザ任せに描画するだけでは勿体ないでしょう。ぜひその構造を読み取って、SVGならではの面白さを考えてみましょう。 今回はその一つ、SVG Morpheusを紹介します。SVGアイコンから別なアイコンへのモーフィングを生成するJavaScriptライブラリです。

SVG Morpheusの使い方

元々の形がこれで。別なアイコンを選択します。

ぐにゃっと歪んで別な形になります。

動画です。様々なアニメーションスタイルが定義されています。

SVG Morpheusの良いところはアイコンとアイコン、そしてアニメーションスタイルさえ決めてしまえば自動で格好良いモーフィングを行ってくれる点にあります。ユーザへの通知や、スプラッシュ画面などで使ってみても面白そうです。強く目を引ける効果と言えそうです。

SVG MorpheusはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

alexk111/SVG-Morpheus SVG Morpheus - Morph SVG icons