}}</style>この方法でも簡単にできますが、もっと簡単にする方法もあるようですね。それが「lazylinepainter」を使った方法です。公式GitHubSVGファイルの作成、コンパイルまずはSVGファイルを作成します。※SVGの作り方はここでは省略SVGファイルを作成したらそのデータをコンパイルしてJSファイル変換します。それを公式サイトできるので、そちらを開いてドラッグ!コンパイルコンパイルするときにいろいろと設定ができるみたいなので設定します。Zipを押せば、必要なファイルが落ちてきます。lazy-line-painter-1.9.6.min.jsindex.htmlこの2つのファイルが落ちてきました。htmlを覗いてみましたが、上のjsファイル以外特に読み込んでいないのでlazy-line-painter-1.9.6.min.jsを読み込むこととhtmlの中にjsが書かれているのでそれをコピー。※このjsがさっき設定したやつの記載のようですね。変更したかったらこちらをいじればいいようです。あとはSVGを表示させたい場所にコピーすればこれでOKです。まとめちょっとしたSVGアニメーションだったら、これでやるほうが簡単かもしれませんね。コンパイルに手間もそんなにかからないですし簡単にできますね。実際どう動くかもコンパイルするときに微調整もできるのでわかりやすかったです。