See the Pen 9-4-1 SVGアニメーション(vivus.js) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み 仕組み ⇒ SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。 長所 ⇒ 拡大縮小しても画質が劣化しない。 短所 ⇒ 制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる vivus.jsというライブラリを使用して、SVG形式で書き出されたイラストやアウトライン化されたテキストを描画する。 ※サンプルではアウトライン化したテキストをアニメーションする。 サンプル9-4-1(※サンプルデータ:https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/