【簡単】テキストでSVGアニメーションが作れる!

こんにちは、カリンです。

テキストが動くアニメーションが簡単に作れるので、今日はその方法を紹介致します!

出来上がりサンプル

See the Pen
テキストで作るSVGアニメーション
by Karin (@Karin-Mie)
on CodePen.

やる事

SVGを用意する

 <svg xmlns="http://www.w3.org/2000/svg" x="0″ y="0″ viewBox="0 0 1600 800″> </svg>で<text>アニメーションさせたい文字</text>を囲む。
 

CSSの解説

stroke
指定した色でテキストのアウトラインを描きます

stroke-width
アウトラインの線幅の指定

fill
アウトラインの中の色を指定。
塗りつぶさずに、アウトラインだけで表現したい場合はfill:none;にします。

stroke-dasharray
線の間隔を指定

stroke-dashoffset
線の始まりの位置を指定。
stroke-dasharrayで指定した分だけ、storoke-dashoffsetで開始位置をずらす。

@keyframe で組み合わせるとアニメーションができる😊

 

参考サイト

SVGを使ったテキストアニメーション