SVGアニメーションをWEB上に実装する方法

サイトを開いたら、SVG画像を使って文字がフワーっと浮かび上がるようなアニメーションがローディングされるようなアレの実装方法です。

ただ、あくまでも「なんちゃってローディング」なので、実際に読込完了までの間とかは全然関係ないやり方です。

演出方法の1つとしてご紹介します。

SVG画像をGETする or 作る

作る場合は「イラストレーター」を使うと簡単です。

①文字を書く

②書式 ＞ アウトライン化

③名前をつけて保存 ＞ SVGで保存

そしてこのSVGが書かれたコードが必要となります。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 367 89.4" style="enable-background:new 0 0 367 89.4;" xml:space="preserve">
<g>
<path d="M15,71.9c1.1,0.2,2.3,0.8,2.3,2.2c0,1.6-3,5.5-6.1,9.7c-1.6,2.2-4.1,5.6-7.1,5.6c-2.9,0-4.1-1.7-4.1-4.3
c0-5.3,8.5-18.4,11.4-23.4C8.5,59.9,6,57.7,6,54c0-7,14.2-10.2,19.2-11.8L44.3,17c-21,0.4-37.7,8-41.3,8c-0.7,0-1.9-0.1-1.9-1.2
C1.1,21,8,11.8,10,9.1c2.2-3,5.8-4,9.1-4.9C29.5,1.2,40.6,0,51.4,0c29.8,0,38,9.6,38,24.5C89.4,50,58.3,68,19.9,63.7L15,71.9z
M36,40.7c4.4,0,9.4-1.7,9.4,0.6c0,2.4-10.2,3-12.1,4.3l-2.6,4C35,50.8,39.1,51,43,50.8c23.5-1.3,39-18.5,37.7-26
C79.3,17.4,56.8,16,51.2,16c-0.1,3.2-0.8,4.8-2.6,7.3L36,40.7z"/>
<path d="M132.1,65.6l-12.5,14.6c-1.4,2-4.1,6.8-7,6.8c-2.6,0-5.9-2.4-5.9-5.2c0-3.4,8.5-11.6,10.2-14.9c-8.4,0.7-12.2-0.8-12.2-4.9
c0-2.8,3.5-9.1,6.7-9.1c0.8,0,1.8,0.8,2.8,0.8c1.3,0,1.4-0.8,19.7-4.3c4.6-4.4,13.2-13.8,23.8-25.8c1.6-1.7,5-5.9,5-8.3
c0-2.2-2.8-2.6-4.2-2.6c-6.4,0-21.5,4.4-41.2,12.6c0.8,0.4,1.7,0.7,1.7,1.8c0,1.7-1.6,2.4-3,2.9c-9,3.1-8.2,3.2-16.4,7.4
c-1.4,0.7-3.1,1.7-4.8,1.7c-2.8,0-3.6-3.4-3.6-5.5c0-3.5,1.9-10.3,4.1-13.2c4.3-4.9,24.4-11.5,31.2-13.7c10-3.2,25.1-6.1,35.4-6.1
c10,0,13,5.9,13,11.8c0,7.4-7.2,14.6-12,19.8l-13.6,14.4l18.5-2.2l21.7-27.2c1.4-1.9,6.5-8.6,9-8.6c1.6,0,2,1.4,2,2.8
c0,3.8-0.8,6.1-9.8,17.2l-13,16c5.5,0.1,11.4,0,16.3,3c-5.6,4.4-10.6,9.8-14.4,16.1c-3.6-0.8-7.3-1.2-12.2-0.8
c-1.8,3.1-6.2,8.8-6.2,12.4c0,2.2,0.8,4.9,1.3,7.2c-3.8-0.8-10,5-13.1,4c-2-0.7-2.8-2.4-2.2-6s2.5-9.1,7-17.5L132.1,65.6z"/>
<path d="M212.2,71.9c1.1,0.2,2.3,0.8,2.3,2.2c0,1.6-3,5.5-6.1,9.7c-1.6,2.2-4.1,5.6-7.1,5.6c-2.9,0-4.1-1.7-4.1-4.3
c0-5.3,8.5-18.4,11.4-23.4c-2.9-1.8-5.4-4-5.4-7.7c0-7,14.2-10.2,19.2-11.8L241.4,17c-21,0.4-37.7,8-41.3,8c-0.7,0-1.9-0.1-1.9-1.2
c0-2.9,7-12.1,8.9-14.8c2.2-3,5.8-4,9.1-4.9c10.4-3,21.5-4.2,32.3-4.2c29.8,0,38,9.6,38,24.5c0,25.6-31.1,43.6-69.5,39.2
L212.2,71.9z M233.2,40.7c4.4,0,9.4-1.7,9.4,0.6c0,2.4-10.2,3-12.1,4.3l-2.6,4c4.4,1.2,8.5,1.4,12.4,1.2c23.5-1.3,39-18.5,37.7-26
c-1.3-7.3-23.9-8.8-29.4-8.8c-0.1,3.2-0.8,4.8-2.6,7.3L233.2,40.7z"/>
<path d="M325.2,65.8c-7.3,8.5-20.5,19.8-32.4,19.8c-8.8,0-12.8-7.8-13.1-15.7c-0.5-15.7,16.9-31.8,32.5-31.7c3.8,0,8.6,1,8.6,5.8
c0,5.9-5.9,14.8-28.9,22.3l-0.2,2.6c-0.4,4.6,3.6,6.1,7.4,6.1c8.5,0,18.6-8.8,25-13.8L325.2,65.8z M310.3,46.4
c0-0.8-0.6-1.6-1.4-1.3c-6,1.6-13,7.3-16.2,15.2C303.2,56.8,310.4,48.5,310.3,46.4z"/>
<path d="M331.9,57.6c-4.2,6.6-9.2,9.7-14.4,14.9l-0.5-5.3c3.1-2.5,5.6-5.5,7.9-8.8c-2.5-0.2-3.2-1.2-3.2-3.7
c0-8.6,12.2-17.3,15.1-17.3c1.2,0,2.2,1,2.2,2c0,1.2-0.4,2.3-0.8,3.4c11.3-1.6,17.9-3,19.1-1.6c1.8,2.3,2.6,4.2,2.9,6.4
c0,3.7-2.3,5.5-5,7.8c-3.5,3-9.4,8.9-9.4,13.7c0,1.9,1.9,3.4,3.7,3.4c5.2,0,12.7-7.8,16.7-10.8l0.8,4.4
c-4.6,5.2-18.4,18.5-25.2,18.5c-5,0-8.2-4.7-8.2-9.2c0-8.2,6.2-14.5,11-20.3l-0.2-0.2L331.9,57.6z"/>
</g>
</svg>

ここにclassをつけていきます。

「class」を付与していく

【html】

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 367 89.4" style="enable-background:new 0 0 367 89.4;" xml:space="preserve">
<g>
<path class="c-loading-anime" d="M15,71.9c1.1,0.2,2.3,0.8,2.3,2.2c0,1.6-3,5.5-6.1,9.7c-1.6,2.2-4.1,5.6-7.1,5.6c-2.9,0-4.1-1.7-4.1-4.3
c0-5.3,8.5-18.4,11.4-23.4C8.5,59.9,6,57.7,6,54c0-7,14.2-10.2,19.2-11.8L44.3,17c-21,0.4-37.7,8-41.3,8c-0.7,0-1.9-0.1-1.9-1.2
C1.1,21,8,11.8,10,9.1c2.2-3,5.8-4,9.1-4.9C29.5,1.2,40.6,0,51.4,0c29.8,0,38,9.6,38,24.5C89.4,50,58.3,68,19.9,63.7L15,71.9z
M36,40.7c4.4,0,9.4-1.7,9.4,0.6c0,2.4-10.2,3-12.1,4.3l-2.6,4C35,50.8,39.1,51,43,50.8c23.5-1.3,39-18.5,37.7-26
C79.3,17.4,56.8,16,51.2,16c-0.1,3.2-0.8,4.8-2.6,7.3L36,40.7z"/>
<path class="c-loading-anime" d="M132.1,65.6l-12.5,14.6c-1.4,2-4.1,6.8-7,6.8c-2.6,0-5.9-2.4-5.9-5.2c0-3.4,8.5-11.6,10.2-14.9c-8.4,0.7-12.2-0.8-12.2-4.9
c0-2.8,3.5-9.1,6.7-9.1c0.8,0,1.8,0.8,2.8,0.8c1.3,0,1.4-0.8,19.7-4.3c4.6-4.4,13.2-13.8,23.8-25.8c1.6-1.7,5-5.9,5-8.3
c0-2.2-2.8-2.6-4.2-2.6c-6.4,0-21.5,4.4-41.2,12.6c0.8,0.4,1.7,0.7,1.7,1.8c0,1.7-1.6,2.4-3,2.9c-9,3.1-8.2,3.2-16.4,7.4
c-1.4,0.7-3.1,1.7-4.8,1.7c-2.8,0-3.6-3.4-3.6-5.5c0-3.5,1.9-10.3,4.1-13.2c4.3-4.9,24.4-11.5,31.2-13.7c10-3.2,25.1-6.1,35.4-6.1
c10,0,13,5.9,13,11.8c0,7.4-7.2,14.6-12,19.8l-13.6,14.4l18.5-2.2l21.7-27.2c1.4-1.9,6.5-8.6,9-8.6c1.6,0,2,1.4,2,2.8
c0,3.8-0.8,6.1-9.8,17.2l-13,16c5.5,0.1,11.4,0,16.3,3c-5.6,4.4-10.6,9.8-14.4,16.1c-3.6-0.8-7.3-1.2-12.2-0.8
c-1.8,3.1-6.2,8.8-6.2,12.4c0,2.2,0.8,4.9,1.3,7.2c-3.8-0.8-10,5-13.1,4c-2-0.7-2.8-2.4-2.2-6s2.5-9.1,7-17.5L132.1,65.6z"/>
<path class="c-loading-anime" d="M212.2,71.9c1.1,0.2,2.3,0.8,2.3,2.2c0,1.6-3,5.5-6.1,9.7c-1.6,2.2-4.1,5.6-7.1,5.6c-2.9,0-4.1-1.7-4.1-4.3
c0-5.3,8.5-18.4,11.4-23.4c-2.9-1.8-5.4-4-5.4-7.7c0-7,14.2-10.2,19.2-11.8L241.4,17c-21,0.4-37.7,8-41.3,8c-0.7,0-1.9-0.1-1.9-1.2
c0-2.9,7-12.1,8.9-14.8c2.2-3,5.8-4,9.1-4.9c10.4-3,21.5-4.2,32.3-4.2c29.8,0,38,9.6,38,24.5c0,25.6-31.1,43.6-69.5,39.2
L212.2,71.9z M233.2,40.7c4.4,0,9.4-1.7,9.4,0.6c0,2.4-10.2,3-12.1,4.3l-2.6,4c4.4,1.2,8.5,1.4,12.4,1.2c23.5-1.3,39-18.5,37.7-26
c-1.3-7.3-23.9-8.8-29.4-8.8c-0.1,3.2-0.8,4.8-2.6,7.3L233.2,40.7z"/>
<path class="c-loading-anime" d="M325.2,65.8c-7.3,8.5-20.5,19.8-32.4,19.8c-8.8,0-12.8-7.8-13.1-15.7c-0.5-15.7,16.9-31.8,32.5-31.7c3.8,0,8.6,1,8.6,5.8
c0,5.9-5.9,14.8-28.9,22.3l-0.2,2.6c-0.4,4.6,3.6,6.1,7.4,6.1c8.5,0,18.6-8.8,25-13.8L325.2,65.8z M310.3,46.4
c0-0.8-0.6-1.6-1.4-1.3c-6,1.6-13,7.3-16.2,15.2C303.2,56.8,310.4,48.5,310.3,46.4z"/>
<path class="c-loading-anime" d="M331.9,57.6c-4.2,6.6-9.2,9.7-14.4,14.9l-0.5-5.3c3.1-2.5,5.6-5.5,7.9-8.8c-2.5-0.2-3.2-1.2-3.2-3.7
c0-8.6,12.2-17.3,15.1-17.3c1.2,0,2.2,1,2.2,2c0,1.2-0.4,2.3-0.8,3.4c11.3-1.6,17.9-3,19.1-1.6c1.8,2.3,2.6,4.2,2.9,6.4
c0,3.7-2.3,5.5-5,7.8c-3.5,3-9.4,8.9-9.4,13.7c0,1.9,1.9,3.4,3.7,3.4c5.2,0,12.7-7.8,16.7-10.8l0.8,4.4
c-4.6,5.2-18.4,18.5-25.2,18.5c-5,0-8.2-4.7-8.2-9.2c0-8.2,6.2-14.5,11-20.3l-0.2-0.2L331.9,57.6z"/>
</g>
</svg>

はい、こんな感じで大丈夫です。

cssでアニメーションの記述を書く

後は「c-loading-anime」のclassに対してスタイルを付与してやればOKです。

【css】

.c-loading-anime {
fill: $white;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
stroke-width: 2;
animation: c-loading-text 1.8s ease-in 1.0s both;
}
 
@keyframes c-loading-text {
0% {
stroke-dashoffset: 3000;
fill: transparent;
stroke: #c00;
}
100% {
stroke-dashoffset: 0;
fill: #c00;
stroke: #c00;
}
}

はい、こんな感じでどうでしょう。

後はアニメーションをいろいろといじってイイ感じの動きにしてあげればOKだと思います。

・DEMOページ

現場から以上です！