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)です。

SVG ANIMATIONS ndrwhr/svg-animation-src