ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・IllustratorでSVGファイルを作成しvivus.jsを使用 ・文字のアウトラインの基本のアニメーション ・SVGのマスクを使ったアニメーション SVGコードを編集 ①作成したSVGをエディタで開きます。 ②1.2行目と、pathを囲んでいるgタグとその閉じタグを消します。(pathは消さない) ③続いてsvgにidを付与します。今回は id="text-anime" と入れました。 ④pathのcssを追加 編集後のコードがこちらです。 <svg version="1.1" id="text-anime" xmlns="http://www.w3.org/2000/svg" xmlns: