【 更新 】おすすめ記事はこちら

【CSS】SVGファイルで手書き風アニメーションを作る

アニメーションをつけて動きのあるサイトにしたいとき。

いくつか方法はありますが、文字を手書き風に表現するなら今回の方法が最適です。

流れとしては、元となる「SVGファイル」を作成して、CSSの値で動きを調整するだけ。

JavaScriptを使うような高度なスキルは不要です。

その代わりとして覚えるプロパティは「全6種類」。プラスして「@keyframes(キーフレーム)」というアニメーションを細かく制御する構文が必要です。

少し複雑に感じたかもしれませんが、サンプルのコードもあるので、動きを確認しながら進めてみてください。

SVGとは

「SVG」とは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略。

正式名にも入っている通り、Adobe Illustratorから作るデータと同じ「ベクターデータ」です。

「ベクターデータ」は、対象を拡大、縮小しても劣化せず、きれいに表示できるのが特長。

そのため、イラストやアイコン、テキストなどを表現することに向いています。

唯一、違うのは「SVGファイル」が、テキストエディタで「コード編集可能」なところ。

HTMLと組み合わせることで、回転、移動などのアニメーションを、CSS、JavaScriptで細かく調整できるようになります。

複雑な形状になると、その分ファイルが重くなるので、サイズに気をつけて作成してください。

SVGファイルを作成

まずは元となる「SVGファイル」を作成していきます。

Illustratorを開いてアートボードを用意。「文字ツール」でテキストを入力します。

animationと入力

今回は手書き風にしたいので、日本語よりも英語にすると尚良しです。

つづけて「文字サイズ」と「フォント」を変更します。値は任意。

サンプルは、文字サイズを「200px」、フォントを「Segoe Script」にしています。

文字サイズとフォントを変更

「選択ツール」に戻して「animation」を選択。右クリックします。

メニューから「アウトラインを作成」し、テキストをパスに変換(文字を図形化)。

アウトラインを作成

ここでレイヤーパネルに移り、グループ、レイヤーに名前をつけてください。

レイヤーに名前をつける

必須ではありませんが、本記事では構成を確認するために名前を入れています。

入力が終わったら、テキストを「アセットの書き出し」にドラッグ&ドロップ。

アセットの書き出し

あとで分かりやすいようにファイル名を変更し、データ形式を「SVG」にしてから書き出します。

タイトルとデータ形式を変更

SVGをエディタで開く

作成した「SVGファイル」をエディタで開きます。

一面に並んだ数字はすべて座標を示していて、一つひとつの文字がパス(path)で区切られています

サンプルの「animation」の場合は、pathが9つあればOK。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140.82 168.36"><g id="レイヤー_2" data-name="レイヤー 2"><g id="logo"><g id="animation"><path id="a" d="M144,72.85A15.7,15.7,0,0,1,142,79.93a46,46,0,0,1-4.25,6.89A149.52,149.52,0,0,1,125,102q-6.69,6.89-13.52,
....

<g id="レイヤー_2" data-name="レイヤー 2"></g>のような部分は削除するか、名前を半角英数字に変えてください。

このままではアニメーションできないので、HTMLファイルを作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ここに貼り付けます -->
</body>
</html>

作成したら「SVGファイル」のコードをすべてbodyの中に貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140.82 168.36"><g id="logos" data-name="logos"><g id="logo"><g id="animation"><path id="a" d="M144,72.85A15.7,15.7,0,0,1,142,79.93a46,46,0,0,1-4.25,6.89A149.52,149.52,0,0,1,125,102q-6.69,6.89-13.52,..."/>
    </g></g></g></svg>
</body>
</html>

HTMLファイルをブラウザで確認。文字が表示されていればOKです。

ブラウザで表示を確認

CSSプロパティの確認

下表はアニメーションでよく使うプロパティです。

プロパティ意味
fill#000000要素の色
stroke#000000要素の枠の色
stroke-dasharray数値もしくはnone破線の間隔(数値は複数可)
stroke-dashoffset数値破線の開始位置(負の値可)
stroke-widthpx/em/pt/pc/cm/mm/in線の太さ(単位は省略可)
W3C Working Draft

animationについては指定できる値が多いため、こちらをご覧ください。

全て指定する必要はなく、このあとのサンプルコードの内容が入っていればOK。

プロパティ意味
animation-name任意の名前アニメーション名
animation-duration0s所要時間
animation-timing-functionease/ease-in/ease-out/linearタイミング(複数可)
animation-delay0s開始時間
animation-iteration-count1再生回数
animation-directionnormal/reverse/alternate/alternate-reverse再生方向(複数可)
animation-fill-modenone/forwards/backwards/both実行前後の状態(複数可)
animation-play-staterunning/paused実行と停止(複数可)
animation-timeline指定した任意の名前アニメーション名を指定
mdn web docs

その他に下表のプロパティで調整できます。

プロパティ意味
fill-opacity0~1要素の色の透明度
stroke-opacity0~1要素の外枠の色の透明度
stroke-linecapbutt/round/square線端の形状
stroke-linejoinmiter/round/bevel角の形状
W3C Working Draft

CSSでアニメーションを設定

最後にCSSでアニメーションを実装していきます。

HTMLファイルのheadにスタイルを読み込ませます。

<link rel="stylesheet" href="./css/style.css">

CSSファイルには以下のコードを貼り付けてください。

これで文字が縁取られ、塗りの色がついていくアニメーションの完成です。

/* --- 中央寄せ --- */
section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px; /* 任意 */
}

/* --- テキスト --- */
path {
    fill: none; /* 1,塗りの色 */
    stroke: #000; /* 2,線の色 */
    stroke-dasharray: 2000; /* 3,破線の間隔 */
    stroke-dashoffset: 2000; /* 4,破線の開始位置 */
    stroke-width: 1; /* 5,線の太さ */
    animation: handwriting 3s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */
}

/* --- アニメーション --- */
@keyframes handwriting {
    0% {
        fill: transparent; /* 1,塗りの色 */
        stroke-dashoffset: 2000; /* 4,破線の開始位置 */
    }
    50% {
        fill: transparent; /* 1,塗りの色 */
    }
    100% {
        fill: #000; /* 1,塗りの色 */
        stroke-dashoffset: 0; /* 4,破線の開始位置 */
    }
}

下位バージョンのブラウザに対応するときは、ベンダープレフィックスをつけてください。

/* --- 中央寄せ用ベンダープレフィックス --- */
section {
    -webkit-transform: translate(-50%,-50%);
}

/* --- テキスト用ベンダープレフィックス --- */
path {
    -webkit-animation: handwriting 3s ease-in forwards;
}

/* --- アニメーション用ベンダープレフィックス --- */
@-webkit-keyframes handwriting {
    0% {
        fill: transparent;
        stroke-dashoffset: 2000;
    }
    50% {
        fill: transparent;
    }
    100% {
        fill: #000;
        stroke-dashoffset: 0;
    }
}

SVGをオンラインで作成

「SVGファイル」を作りたいけど、Illustratorがないのでできない・・・という人は、

代わりに「SVG Artista」というオンラインツールを使ってみてください。

使い方は、左のメニューからアニメーションを設定して、右上の「GET CODE」でコードをコピーするだけ。

その横にある「PLAY」を押せば、SVGデータを大きな画面で再生することもできます。

まだプロパティに慣れていない、実際に見ながら細かく調整したいときにとっても便利!

SVG作成ツールのSVG Artista

SVGを使ったサイト例

参考までに「SVGファイル」を使ったサイトをご紹介します。

こちらは、焼きたてカスタードアップルパイ専門店「RINGO」のWebサイト。

画面中央にある、RINGOと書かれたロゴタイトルがSVGの部分です。

RINGOの公式サイト

手書き風の文字とは異なり、テキストがユニークなブロック体で、アニメーション色の強い動きになっています。

同じ英語でも、デザインの違いで、オリジナリティの高いサイトになりますね。

おわりに

「SVGファイル」の作り方から、アニメーション設定までの流れは以上になります。

今回は実務でよく使われるテキストを例にしましたが、

より複雑な形をした「建築物」や「OA機器」などに同じような動きをつけることもできますよ。

ものによっては一から作ると時間がかかるので、素材サイトの利用を視野に、作成、実装していきましょう。

アニメーションは、商品の世界観を作ることも、注目してほしい情報へ自然に誘導することもできる表現です。

制作するデザインに合わせて、少しずつ取り入れてみてください。