【簡単】テキストで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を使ったテキストアニメーション