SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。 しかしWebブラウザ側でJavaScriptをオフにされるだけでJavaScriptベースのアニメーションは実現できなくなります。そこで参考にしたいのがSVG ANIMATIONSです。
SVG ANIMATIONSの使い方
SVG ANIMATIONSはCSSとSVGのみでアニメーションしています。JavaScriptも画像も使われていません。
複雑な幾何学模様系のアニメーションが多いです。
線が動くだけでなく、円を使った例も。
JavaScriptを使っていないので、CSSとSVGさえサポートされていればどこでも動作します。デモではマウスオーバー時にアニメーションするようになっています。小さくしても綺麗に表示されるので、アニメーションする小さなアイコンなどに用いても面白そうです。
SVG ANIMATIONSはCSS/SVG製のオープンソース・ソフトウェア(MIT License)です。