インラインSVGでCSSを使った一筆書きアニメーションについてまとめてみた（備忘録）
今回はインラインSVGでCSSを使った一筆書きアニメーションについてまとめてみた。
一筆書きは、自分が意図した通りの筆順でアニメーションをさせることができるのが特徴だ。一筆書きに向いているのは、筆記体などの文字が繋がっているものが多い。
今回はvivus.jsは用いずにCSSでマスクを使って対応している。前回の記事の線画アニメーションを応用して対応しているので、読んでいない方は目を通しておくことをおすすめする。
なお、デモでは下記に紹介していないパターンも いくつか作成してみた。色々応用ができるので興味のある方は試してみるといいかと思う。
それでは実装に入っていく。
SVGの筆記体のフォントをアウトライン化した状態で準備
Illustratorで筆記体のフォントを選び、自由に文字を入力し、文字サイズを任意の値に調整後、線のアウトライン化をして、SVG形式で保存する。
このSVGデータは、レイヤーの重なり順では一番上になる。この下に後ほど作成する一筆書きのSVGデータが重なるイメージだ。
インラインSVGの筆記体のフォントに対して、パスで一筆書きをしたSVGを準備
先ほど作成したSVGを複製して、別の任意の名前をつけた上でIllustratorを開く。
その後、ペンツールに持ち替えてなぞっていく。この時に、塗りはなし、線を任意の太さにして、透明度を薄くするとやりやすいかと思う。
ペンツールの使い方までは解説はしないが、最後の文字まで繋がった状態で対応することがポイントだ。
今回の場合は、tの横線、iの点部分はあえて切り離している。これらはアニメーションするときにanimation-delayで遅らせる必要が出てくるが、パスを切り離さなければそういった対応はしなくてもよい。
パスの作成が終わった段階で、元の筆記体の文字がパスからはみ出ているところがないか確認する。
この調整が終わった段階で、元の筆記体の文字を削除の上、パスの部分だけが残った状態でインラインSVGで保存し、準備が完了する。
それでは、これから実装に入っていきたい。
HTMLの記述について
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インラインSVGのCSSでの一筆書きアニメーション|freefuntimes – 自由で楽しいひとときを…</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section>
<div class="ly_inner" id="title1">
<h2>インラインsvgのコードで対応する場合</h2>
<div class="ly_svgWrap">
<h3>一筆書きアニメーション</h3>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 180" style="enable-background:new 0 0 640 180;" xml:space="preserve" class="svg_freefuntimes">
<!-- テキストのインラインSVG -->
<path class="cursive" d="M111.2,74.5c-2.9,4.6-5.7,9.6-8.5,14.9c-2.8,5.3-5.8,10.6-9,15.8c-3.2,5.2-6.6,10.3-10.2,15.1s-7.6,9.1-12,12.8
c-4.4,3.7-9.3,6.7-14.6,8.9c-5.3,2.2-11.2,3.3-17.8,3.3c-2.2,0-4.5-0.2-7-0.7c-2.5-0.5-4.8-1.3-6.8-2.4c-2.1-1.1-3.8-2.6-5.1-4.4
c-1.4-1.8-2-4.1-2-6.9c0-2.1,0.5-4,1.4-5.6c0.9-1.6,2.1-3,3.6-4.1c1.5-1.1,3.2-1.9,5.1-2.5c1.9-0.6,3.9-0.9,5.8-0.9
c1,0,2,0,2.8,0.1c0.8,0.1,1.6,0.2,2.3,0.3v0.9c-3.5,0.2-6.4,1.5-8.5,3.7c-2.2,2.3-3.2,5.2-3.2,8.7c0,3.8,1.1,6.8,3.2,9.1
c2.1,2.2,5.6,3.4,10.3,3.4c4.3,0,8.5-1.2,12.4-3.6c4-2.4,7.8-5.5,11.4-9.4c3.6-3.9,7.1-8.3,10.3-13.3c3.3-5,6.4-10,9.3-15.2
c3-5.2,5.8-10.2,8.5-15.1c2.7-4.9,5.3-9.2,7.7-13H90l1.1-2h10.8c2.1-3.7,4.6-7.7,7.5-12.1c2.9-4.4,6.2-8.5,9.8-12.3
c3.6-3.8,7.6-7,11.9-9.6c4.3-2.6,8.9-3.9,13.9-3.9c1.5,0,3,0.2,4.5,0.6c1.4,0.4,2.7,0.9,3.8,1.6c1.1,0.7,2.1,1.7,2.8,2.8
c0.7,1.1,1,2.5,1,4c0,2.6-1,4.6-2.9,5.9c-1.9,1.3-4.1,2-6.7,2c-0.6,0-1.2-0.1-2-0.2c0.7-1.3,1.2-2.7,1.7-4.2c0.4-1.5,0.7-3,0.7-4.7
c0-2.1-0.4-3.7-1.3-4.8c-0.9-1.1-2.1-1.7-3.5-1.7c-1.8,0-3.8,0.7-5.8,2.1c-2.1,1.4-4.1,3.3-6,5.6c-2,2.3-3.9,4.8-5.9,7.6
c-1.9,2.8-3.7,5.5-5.3,8.2c-1.6,2.7-3.1,5.2-4.3,7.5c-1.3,2.3-2.3,4.1-3.1,5.4h28.4l-1.2,2H111.2z" />
<path class="cursive" d="M107.7,111.2c3.7-6.5,7.5-12.9,11.4-19.2c3.8-6.4,7.7-12.9,11.5-19.5l12.5-0.4l-14.5,20.5l0.2,0.2c2.8-3.4,5.3-6.2,7.4-8.3
c2.2-2.1,4.1-3.8,5.7-5.1c1.6-1.3,3-2.3,4.1-3c1.1-0.7,1.9-1.3,2.4-1.8c0.8-0.8,1.6-1.4,2.3-1.9c0.7-0.5,1.5-0.8,2.5-1.1
c1-0.3,2.1-0.4,3.5-0.5c1.4-0.1,3.1-0.1,5.1-0.2c-1.4,2-2.7,4.1-3.9,6.2c-1.2,2.2-1.8,4.5-1.8,7c0,3.2,1.6,4.7,4.7,4.7
c1,0,2-0.2,3-0.7c1-0.4,1.9-1,2.8-1.7s1.7-1.4,2.5-2.1c0.8-0.8,1.5-1.5,2.2-2.1l0.4,0.5c-2.1,2.6-4.5,4.7-7.3,6.3
c-2.8,1.6-5.8,2.4-9.1,2.4c-2.9,0-5.2-0.8-6.9-2.3c-1.7-1.5-2.5-3.8-2.5-6.8c0-1.9,0.5-3.7,1.7-5.4l-0.2-0.2
c-3.1,2.1-6,4.4-8.8,7.2c-2.8,2.7-5.4,5.6-7.8,8.6c-2.4,3-4.6,6.1-6.6,9.3c-2,3.2-3.8,6.3-5.4,9.3L107.7,111.2z" />
<path class="cursive" d="M217.3,82.4c-2.3,3.1-4.7,6.1-7.3,9.1c-2.6,3-5.7,6.2-9.3,9.5c-5.1,4.5-9.9,7.7-14.6,9.4c-4.7,1.7-9,2.6-13.1,2.6
c-4.2,0-7.5-1.2-9.9-3.7s-3.6-5.7-3.6-9.7c0-3.5,1.1-7,3.2-10.5c2.1-3.4,4.8-6.5,8-9.2c3.2-2.7,6.8-4.9,10.6-6.6
c3.9-1.7,7.5-2.5,10.9-2.5c3.2,0,5.6,0.6,7.4,1.8c1.8,1.2,2.6,2.9,2.6,5.1c0,1.8-0.6,3.4-1.8,4.8c-1.2,1.5-2.8,2.8-4.7,4
c-1.9,1.2-4.1,2.2-6.4,3.1c-2.4,0.9-4.7,1.6-7.1,2.3c-2.3,0.7-4.5,1.2-6.6,1.7c-2.1,0.4-3.7,0.8-5.1,1.1c-0.4,1.5-0.5,2.8-0.5,4
c0,3.2,0.9,5.7,2.6,7.7c1.8,2,4.2,3,7.4,3c3.1,0,6.5-0.9,10.2-2.8c3.7-1.8,7.4-4.5,11.2-8c2.9-2.7,5.6-5.6,8.2-8.5s5-5.7,6.9-8.3
L217.3,82.4z M193.4,74.9c0-1-0.3-1.8-0.8-2.2c-0.5-0.4-1.3-0.7-2.1-0.7c-1.8,0-3.8,0.8-5.9,2.3c-2.1,1.5-4.1,3.4-6,5.7
c-1.9,2.2-3.5,4.6-5,7c-1.4,2.5-2.4,4.6-2.8,6.4c3-0.6,5.9-1.6,8.6-2.9c2.7-1.4,5.1-2.9,7.2-4.6c2.1-1.7,3.8-3.6,5-5.5
C192.8,78.5,193.4,76.7,193.4,74.9z" />
<path class="cursive" d="M262,82.4c-2.3,3.1-4.7,6.1-7.3,9.1c-2.6,3-5.7,6.2-9.3,9.5c-5.1,4.5-9.9,7.7-14.6,9.4c-4.7,1.7-9,2.6-13.1,2.6
c-4.2,0-7.5-1.2-9.9-3.7s-3.6-5.7-3.6-9.7c0-3.5,1.1-7,3.2-10.5c2.1-3.4,4.8-6.5,8-9.2c3.2-2.7,6.8-4.9,10.6-6.6
c3.9-1.7,7.5-2.5,10.9-2.5c3.2,0,5.6,0.6,7.4,1.8c1.8,1.2,2.6,2.9,2.6,5.1c0,1.8-0.6,3.4-1.8,4.8c-1.2,1.5-2.8,2.8-4.7,4
c-1.9,1.2-4.1,2.2-6.4,3.1c-2.4,0.9-4.7,1.6-7.1,2.3c-2.3,0.7-4.5,1.2-6.6,1.7c-2.1,0.4-3.7,0.8-5.1,1.1c-0.4,1.5-0.5,2.8-0.5,4
c0,3.2,0.9,5.7,2.6,7.7c1.8,2,4.2,3,7.4,3c3.1,0,6.5-0.9,10.2-2.8c3.7-1.8,7.4-4.5,11.2-8c2.9-2.7,5.6-5.6,8.2-8.5s5-5.7,6.9-8.3
L262,82.4z M238.2,74.9c0-1-0.3-1.8-0.8-2.2c-0.5-0.4-1.3-0.7-2.1-0.7c-1.8,0-3.8,0.8-5.9,2.3c-2.1,1.5-4.1,3.4-6,5.7
c-1.9,2.2-3.5,4.6-5,7c-1.4,2.5-2.4,4.6-2.8,6.4c3-0.6,5.9-1.6,8.6-2.9c2.7-1.4,5.1-2.9,7.2-4.6c2.1-1.7,3.8-3.6,5-5.5
C237.5,78.5,238.2,76.7,238.2,74.9z" />
<path class="cursive" d="M274.1,74.5c-2.9,4.6-5.7,9.6-8.5,14.9c-2.8,5.3-5.8,10.6-9,15.8c-3.2,5.2-6.6,10.3-10.2,15.1s-7.6,9.1-12,12.8
c-4.4,3.7-9.3,6.7-14.6,8.9c-5.3,2.2-11.2,3.3-17.8,3.3c-2.2,0-4.5-0.2-7-0.7c-2.5-0.5-4.8-1.3-6.8-2.4c-2.1-1.1-3.8-2.6-5.1-4.4
c-1.4-1.8-2-4.1-2-6.9c0-2.1,0.5-4,1.4-5.6c0.9-1.6,2.1-3,3.6-4.1c1.5-1.1,3.2-1.9,5.1-2.5c1.9-0.6,3.9-0.9,5.8-0.9
c1,0,2,0,2.8,0.1c0.8,0.1,1.6,0.2,2.3,0.3v0.9c-3.5,0.2-6.4,1.5-8.5,3.7c-2.2,2.3-3.2,5.2-3.2,8.7c0,3.8,1.1,6.8,3.2,9.1
c2.1,2.2,5.6,3.4,10.3,3.4c4.3,0,8.5-1.2,12.4-3.6c4-2.4,7.8-5.5,11.4-9.4c3.6-3.9,7.1-8.3,10.3-13.3c3.3-5,6.4-10,9.3-15.2
c3-5.2,5.8-10.2,8.5-15.1c2.7-4.9,5.3-9.2,7.7-13h-10.6l1.1-2h10.8c2.1-3.7,4.6-7.7,7.5-12.1c2.9-4.4,6.2-8.5,9.8-12.3
c3.6-3.8,7.6-7,11.9-9.6c4.3-2.6,8.9-3.9,13.9-3.9c1.5,0,3,0.2,4.5,0.6c1.4,0.4,2.7,0.9,3.8,1.6c1.1,0.7,2.1,1.7,2.8,2.8
c0.7,1.1,1,2.5,1,4c0,2.6-1,4.6-2.9,5.9c-1.9,1.3-4.1,2-6.7,2c-0.6,0-1.2-0.1-2-0.2c0.7-1.3,1.2-2.7,1.7-4.2c0.4-1.5,0.7-3,0.7-4.7
c0-2.1-0.4-3.7-1.3-4.8c-0.9-1.1-2.1-1.7-3.5-1.7c-1.8,0-3.8,0.7-5.8,2.1c-2.1,1.4-4.1,3.3-6,5.6c-2,2.3-3.9,4.8-5.9,7.6
c-1.9,2.8-3.7,5.5-5.3,8.2c-1.6,2.7-3.1,5.2-4.3,7.5c-1.3,2.3-2.3,4.1-3.1,5.4h28.4l-1.2,2H274.1z" />
<path class="cursive" d="M331.3,72.1c-2.9,4.8-5.5,9-8,12.8c-2.5,3.7-4.6,7.1-6.3,10c-1.8,2.9-3.1,5.4-4.1,7.5c-1,2.1-1.5,4-1.5,5.6
c0,1.6,0.7,2.4,2.1,2.4c0.9,0,1.9-0.3,3.2-0.9c1.2-0.6,2.6-1.4,4-2.4c1.4-1,2.8-2.1,4.3-3.5c1.5-1.3,2.9-2.6,4.2-4
c1.6-1.7,3.2-3.4,4.8-5.1c1.6-1.7,3-3.4,4.4-5c1.4-1.6,2.6-3.1,3.7-4.5c1.1-1.4,2-2.5,2.8-3.5l0.9,0.7c-1.8,2.3-4,5.2-6.7,8.4
c-2.7,3.3-5.6,6.5-8.7,9.6c-3.7,3.8-7.2,6.8-10.3,8.9c-3.2,2.1-6.3,3.2-9.3,3.2c-2.2,0-4-0.7-5.3-2c-1.3-1.3-2-3-2-5
c0-1.4,0.1-2.6,0.4-3.7c0.3-1.1,0.6-1.9,0.9-2.5l-0.2-0.2c-1.3,1.4-2.8,2.9-4.3,4.5c-1.5,1.6-3.2,3-5,4.3c-1.8,1.3-3.6,2.4-5.7,3.3
c-2,0.9-4.2,1.3-6.5,1.3c-2.3,0-4-0.7-5.2-2.1c-1.2-1.4-1.8-3.1-1.8-5c0-2.8,1.5-6.8,4.5-12.1s7.1-12.1,12.2-20.6l11.7-0.4
c-5.8,8.9-10.5,16.2-14.1,21.8c-3.6,5.7-5.4,9.9-5.4,12.7c0,0.9,0.2,1.6,0.7,2.2c0.5,0.6,1.1,0.9,1.9,0.9c1.4,0,3.1-0.6,5-1.8
c1.9-1.2,4-2.8,6.1-4.7c2.1-2,4.2-4.3,6.3-6.8c2.1-2.6,4-5.2,5.7-8L320,73L331.3,72.1z" />
<path class="cursive" d="M345.1,92.3c1-1.3,2.5-3.2,4.5-5.6c1.9-2.4,4.2-4.8,6.7-7.2c2.5-2.3,5.2-4.4,8-6.2c2.9-1.8,5.7-2.6,8.6-2.6
c2.4,0,4.3,0.7,5.5,2c1.2,1.4,1.9,3,1.9,5c0,2.5-0.8,5-2.4,7.6c-1.6,2.6-3.3,5.2-5.2,7.8c-1.9,2.6-3.6,5.1-5.2,7.5
c-1.6,2.4-2.4,4.6-2.4,6.7c0,0.9,0.2,1.6,0.7,2.1c0.4,0.5,1.2,0.8,2.2,0.8c1,0,2.7-0.8,5.1-2.4c2.4-1.6,5.6-4.5,9.6-8.7
c3.2-3.4,6-6.7,8.7-9.8c2.6-3.2,4.6-5.6,5.9-7.2l1.1,0.5c-1.9,2.3-4.3,5.1-7,8.5c-2.8,3.4-5.8,6.7-8.9,10c-3.8,4-7.1,6.9-9.7,8.6
c-2.7,1.7-5.4,2.5-8.3,2.5c-2.8,0-4.8-0.8-6.2-2.3s-2-3.3-2-5.3c0-2.5,0.8-5.1,2.4-7.7c1.6-2.6,3.3-5.2,5.2-7.8
c1.9-2.5,3.6-4.9,5.2-7.2c1.6-2.3,2.4-4.3,2.4-5.9c0-0.8-0.3-1.5-0.8-2c-0.5-0.5-1.3-0.8-2.3-0.8c-1.5,0-3.2,0.7-5.2,2
c-2,1.4-4.1,3.1-6.3,5.3c-2.2,2.2-4.4,4.6-6.7,7.4c-2.3,2.8-4.4,5.5-6.4,8.2c-2,2.8-3.8,5.4-5.4,8c-1.6,2.6-2.9,4.8-3.9,6.6
l-11.1,0.3c3.9-6.5,7.8-12.9,11.7-19.2c3.9-6.3,7.8-12.9,11.6-19.5l12.5-0.4l-14.3,20L345.1,92.3z" />
<path class="cursive" d="M390.8,74.5l0.8-2h8.5l8.2-13.9l11.9-0.4l-9.1,14.3h14l-1,2h-14.2c-3.3,5.4-6.1,10-8.4,13.7c-2.3,3.7-4.1,6.8-5.4,9.2
c-1.4,2.5-2.3,4.4-3,5.9c-0.6,1.5-0.9,2.8-0.9,3.8c0,1,0.3,1.7,0.8,2.3c0.5,0.6,1.2,0.9,2.2,0.9c1.8,0,4.3-0.9,7.3-2.8
c3-1.9,6.2-4.5,9.7-7.8c2.3-2.3,4.9-5.1,7.7-8.2c2.8-3.2,5.4-6.3,7.8-9.6l0.7,0.5c-1.7,2.2-3.8,4.9-6.4,8c-2.6,3.2-5.4,6.3-8.5,9.4
c-1.7,1.7-3.4,3.3-5.2,4.8c-1.8,1.5-3.6,2.8-5.4,4c-1.8,1.1-3.6,2-5.4,2.7c-1.8,0.7-3.5,1-5.2,1c-2.3,0-4.4-0.5-6.2-1.6
s-2.6-2.9-2.6-5.6c0-1.9,0.4-3.9,1.2-5.9c0.8-2,1.9-4.2,3.4-6.7c1.4-2.4,3.1-5.1,5-8c1.9-2.9,4-6.3,6.2-10.1H390.8z" />
<path class="cursive" d="M442.8,72.5c-3.4,5.4-6.4,10.1-8.9,13.9c-2.5,3.9-4.5,7.1-6.1,9.8c-1.6,2.7-2.8,4.9-3.5,6.7c-0.8,1.7-1.2,3.1-1.2,4.2
c0,0.9,0.2,1.6,0.5,2.1c0.3,0.5,0.8,0.8,1.5,0.8c1.5,0,3.5-0.8,6.2-2.5c2.7-1.7,6-4.6,10.1-8.7c1.6-1.7,3.2-3.4,4.7-5
s3-3.2,4.3-4.8c1.4-1.5,2.6-2.9,3.6-4.2c1.1-1.2,1.9-2.2,2.6-3l1,0.7c-0.9,1.2-2,2.5-3.2,4c-1.3,1.5-2.7,3.1-4.1,4.7
c-1.5,1.7-3,3.3-4.5,4.9c-1.5,1.6-3,3.2-4.5,4.6c-4.3,4.3-7.9,7.2-10.9,8.9c-3,1.7-5.8,2.5-8.4,2.5c-2.4,0-4.3-0.7-5.6-2
c-1.3-1.3-2-3-2-5.2c0-1.5,0.3-3,0.8-4.6c0.5-1.6,1.5-3.5,2.8-5.9c1.3-2.3,3.1-5.3,5.3-8.7c2.2-3.5,4.9-7.8,8.2-12.9L442.8,72.5z
M449.1,48.1c1.4,0,2.6,0.5,3.7,1.5c1.1,1,1.6,2.2,1.6,3.6c0,1.5-0.6,2.8-1.8,4c-1.2,1.2-2.5,1.8-4,1.8c-1.6,0-3-0.4-4.2-1.3
c-1.2-0.8-1.8-2.1-1.8-3.8c0-1.7,0.6-3.1,1.9-4.2C446,48.7,447.5,48.1,449.1,48.1z" />
<path class="cursive" d="M485.5,90.8c1.4-1.8,3-3.8,5-6.1c1.9-2.3,4-4.5,6.2-6.5c2.2-2.1,4.6-3.8,7-5.2c2.5-1.4,4.9-2.1,7.3-2.1
c2.3,0,4.2,0.7,5.7,2.2c1.4,1.5,2.1,3.2,2.1,5.1c0,2.5-0.8,5-2.4,7.6c-1.6,2.6-3.4,5.2-5.4,7.8c-2,2.6-3.8,5.1-5.4,7.5
c-1.6,2.4-2.4,4.6-2.4,6.6c0,0.8,0.2,1.5,0.5,2c0.4,0.5,1,0.8,1.8,0.8c3,0,7.9-3.4,14.7-10.2c2.8-2.8,5.5-5.7,8.2-8.9
c2.7-3.1,5-6,7-8.5l0.9,0.4c-0.9,1.1-1.9,2.3-3,3.7c-1.1,1.4-2.4,2.9-3.7,4.5c-1.3,1.6-2.7,3.2-4.2,4.9c-1.5,1.7-3,3.3-4.6,4.8
c-2.1,2.1-3.9,3.8-5.6,5.2c-1.7,1.4-3.2,2.6-4.7,3.5c-1.4,0.9-2.8,1.5-4.1,1.9c-1.3,0.4-2.6,0.6-3.9,0.6c-2.6,0-4.6-0.7-6-2.1
c-1.4-1.4-2.1-3.2-2.1-5.4c0-2.3,0.8-4.9,2.4-7.6c1.6-2.7,3.4-5.4,5.4-7.9c2-2.6,3.8-5,5.4-7.2c1.6-2.2,2.4-4.1,2.4-5.4
c0-1-0.3-1.8-0.9-2.4c-0.6-0.5-1.3-0.8-2.1-0.8c-1.5,0-3.3,0.7-5.3,2.1c-2,1.4-4.1,3.3-6.3,5.6c-2.2,2.3-4.4,4.8-6.5,7.6
c-2.2,2.8-4.2,5.6-6.2,8.4c-1.9,2.8-3.7,5.4-5.2,7.8c-1.5,2.4-2.7,4.4-3.6,5.9l-11.7,0.4c2.5-4,4.9-7.7,7.3-11.3
c2.4-3.6,4.5-6.8,6.4-9.8s3.4-5.6,4.5-7.9c1.1-2.3,1.7-4.1,1.7-5.4c0-0.9-0.3-1.7-0.8-2.4c-0.5-0.7-1.3-1.1-2.4-1.1
c-1.5,0-3.3,0.7-5.3,2.1c-2,1.4-4.1,3.3-6.3,5.6c-2.2,2.3-4.4,4.8-6.7,7.6c-2.2,2.8-4.3,5.6-6.3,8.4c-2,2.8-3.7,5.4-5.3,7.8
s-2.8,4.4-3.6,5.9l-11.1,0.4c4-6.5,8-12.9,12-19.3c4-6.4,7.8-13,11.7-19.6l12.9-0.7l-14.6,20l0.2,0.2c1.5-1.8,3.3-3.8,5.2-6.3
c1.9-2.4,4.1-4.7,6.3-6.9c2.3-2.2,4.7-4.1,7.3-5.6c2.6-1.5,5.4-2.3,8.3-2.3c2.1,0,3.8,0.5,5.2,1.7c1.4,1.1,2.1,2.8,2.1,5
c0,1-0.2,2.1-0.5,3.3c-0.4,1.2-0.8,2.3-1.4,3.5c-0.6,1.1-1.2,2.3-1.9,3.4c-0.7,1.1-1.3,2.1-1.9,3L485.5,90.8z" />
<path class="cursive" d="M581.7,82.4c-2.3,3.1-4.7,6.1-7.3,9.1c-2.6,3-5.7,6.2-9.3,9.5c-5.1,4.5-9.9,7.7-14.6,9.4c-4.7,1.7-9,2.6-13.1,2.6
c-4.2,0-7.5-1.2-9.9-3.7c-2.4-2.5-3.6-5.7-3.6-9.7c0-3.5,1.1-7,3.2-10.5c2.1-3.4,4.8-6.5,8-9.2c3.2-2.7,6.8-4.9,10.6-6.6
c3.9-1.7,7.5-2.5,10.9-2.5c3.2,0,5.6,0.6,7.4,1.8s2.6,2.9,2.6,5.1c0,1.8-0.6,3.4-1.8,4.8c-1.2,1.5-2.8,2.8-4.7,4
c-1.9,1.2-4.1,2.2-6.4,3.1c-2.4,0.9-4.7,1.6-7.1,2.3c-2.3,0.7-4.5,1.2-6.6,1.7c-2.1,0.4-3.7,0.8-5.1,1.1c-0.4,1.5-0.5,2.8-0.5,4
c0,3.2,0.9,5.7,2.6,7.7c1.8,2,4.2,3,7.4,3c3.1,0,6.5-0.9,10.2-2.8c3.7-1.8,7.4-4.5,11.2-8c2.9-2.7,5.6-5.6,8.2-8.5
c2.6-3,5-5.7,6.9-8.3L581.7,82.4z M557.8,74.9c0-1-0.3-1.8-0.8-2.2c-0.5-0.4-1.3-0.7-2.1-0.7c-1.8,0-3.8,0.8-5.9,2.3
c-2.1,1.5-4.1,3.4-6,5.7c-1.9,2.2-3.5,4.6-4.9,7c-1.4,2.5-2.4,4.6-2.8,6.4c3-0.6,5.9-1.6,8.6-2.9c2.7-1.4,5.1-2.9,7.2-4.6
c2.1-1.7,3.8-3.6,5-5.5C557.2,78.5,557.8,76.7,557.8,74.9z" />
<path class="cursive" d="M586.6,110.9c3.7-0.8,7.2-2.2,10.4-4.1c3.2-1.9,6.2-4.2,9-6.8c2.8-2.6,5.4-5.4,7.9-8.5c2.5-3,4.9-6.1,7.2-9.2l0.9,0.7
c-2.9,3.8-5.9,7.5-8.8,11.2c-2.9,3.6-6.1,6.8-9.6,9.6c-3.5,2.8-7.3,5-11.4,6.7c-4.1,1.7-8.9,2.5-14.2,2.5c-1.9,0-3.8-0.2-5.7-0.6
c-1.9-0.4-3.6-1.1-5.1-2c-1.5-0.9-2.7-2.1-3.6-3.6c-0.9-1.5-1.4-3.4-1.4-5.6c0-1.2,0.2-2.3,0.5-3.5c0.3-1.2,0.8-2.2,1.5-3.2
c0.7-1,1.5-1.7,2.5-2.4c1-0.6,2.1-0.9,3.5-0.9c1.7,0,3,0.5,3.9,1.4c0.9,1,1.4,2.1,1.4,3.3c0,1.5-0.4,2.7-1.3,3.5
c-0.9,0.8-1.9,1.2-3.1,1.2c-1,0-1.8-0.2-2.4-0.5c-0.4,0.7-0.7,1.4-0.9,2.1c-0.3,0.8-0.4,1.6-0.4,2.4c0,2.1,0.8,3.7,2.4,5.1
c1.6,1.3,3.4,2,5.6,2c1.3,0,2.7-0.2,4-0.7c1.4-0.4,2.6-1.1,3.6-1.9c1.1-0.8,1.9-1.9,2.6-3c0.7-1.2,1-2.5,1-3.9
c0-1.9-0.5-3.6-1.4-5.2c-0.9-1.6-1.9-3.1-3-4.6c-1.1-1.5-2.1-3-3-4.5c-0.9-1.5-1.4-3.1-1.4-4.8c0-2.1,0.5-3.9,1.4-5.4
c1-1.5,2.2-2.8,3.7-3.9c1.5-1.1,3.3-1.9,5.2-2.4c1.9-0.5,3.9-0.8,5.8-0.8c3.5,0,6.5,0.8,8.9,2.3c2.4,1.5,3.6,3.6,3.6,6.4
c0,2.1-0.7,3.9-2.1,5.2c-1.4,1.4-3.2,2-5.3,2c-0.7,0-1.3-0.1-1.8-0.2s-1-0.2-1.4-0.4c0.8-1.5,1.4-2.9,1.7-4.3
c0.3-1.4,0.5-2.8,0.5-4.2c0-1.5-0.4-2.8-1.3-3.8c-0.8-1.1-2.1-1.7-3.8-1.7c-2.1,0-3.6,0.6-4.7,1.9c-1.1,1.3-1.7,2.9-1.7,4.8
c0,2.1,0.5,3.9,1.4,5.4c0.9,1.6,1.9,3.1,3,4.6c1.1,1.5,2.1,3,3,4.6c0.9,1.6,1.4,3.5,1.4,5.7c0,1.4-0.2,2.8-0.7,4.1
c-0.5,1.3-1.1,2.5-1.9,3.5c-0.8,1-1.7,1.9-2.7,2.6c-1,0.7-2,1.2-3.1,1.4V110.9z" />
<!-- パスで一筆書きしたインラインSVG（マスク背景） -->
<mask id="mask">
<g class="st0">
<path class="st2 mask_animation" d="M144,54c0,0,21-10.7,1-19.3c-8.1-3.5-20.7,10.5-33,29.3c-15,25-35.9,64.7-46,70c-10.5,16.1-43.5,8.5-43.5-0.5
s0.9-10.2,16.6-15.2C91,100,87.6,72.5,87.6,72.5l48.9,0l-27,41c0,0,37.7-41.6,47.1-42.5c-1.2,1.7-6.1,10.5-6.1,12.5
s5.9,17.7,37.8,1.8c21.7-9.3-0.4-12.5-3.9-10.9c0,0-34,22.1-12.6,36.9c15.7,0.3,31.5-10.9,34.3-16.1c5.1-1,34.6-10.4,36.3-14.6
s0.9-4.8-5.2-7.8c-3.3-0.3-6.8,0.8-18.8,7.8c-14,15-9,28-3,29c9,2,24.5-3.5,98.5-60.5c4-7-6-42-49,29c-7,18-27.5,56.9-47.7,64.9
c-15.5,2.1-18.5,3.4-23.9-2.3c-1.4-1.5,0.5,0.7-4.9-4.2s-4.2-13.6,13.5-18.2c27-20.3,52-45.8,52-45.8l44.8-0.2
c0,0-27.9,36.4-15.8,40c8.1,0.3,46.6-42.8,46.6-42.8s-30,36-19,42.8c10.9,2.3,44-42.8,44-42.8l-26,44c0,0,30.1-44,44.3-42.8
c5.5,0.5,5.7,7.8,0.7,12.8s-19.4,25.4-9.2,28.8c16.7,5.7,52.2-56.8,52.2-56.8s-37,54-24.3,56.8c11.8,3.7,48.3-42.8,48.3-42.8
s-14.2,20.9-16,23s-9.1,16.3-3.5,18.5c13,5,45.5-41.5,45.5-41.5l-28,44c0,0,31.6-42.8,43.6-42.7s-15.6,42.7-15.6,42.7
s21.2-43.5,45.4-41c17.1,2.5-27.7,34.2-9.3,39.8c15.4,0.7,22.3-18.8,22.3-18.8s14.1,1.7,31.1-4.9c4-6.3,13-16.7-5-17.2
c-3.7,0.8-25.5,20-21.5,30c1,7,3.1,7.5,10.5,9.5c9.8,0.7,20.6-7.5,28.7-15.5c7.2-7.1,12.2-13.9,12.2-13.9l17.8,5.1l3.8-7.2
c0,0,1.5-5.7-5.6-8.5c-14.9-6-19.7,12.1-11.3,20.5c3.7,3.8,6.2,7.3,6.2,10.5c0,4.1-3.8,7.7-14,10.9c-9.7,0-20.9-13.1-3.8-13.5
c9,11.5,10.2,15.5,18.1,11s23.5-16.7,30.4-29" />
<line class="st3" x1="388.7" y1="72.5" x2="425" y2="72.5" />
<line class="st4" x1="442" y1="54" x2="455" y2="54" />
</g>
</mask>
</svg>
</div>
</div>
</section>
</main>
</body>
</html>
今回のポイントは、SVGファイルが2つあるのだが、これを重ねて使う関係で全てsvgタグの中で記述していく必要が出てくる。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 180" style="enable-background:new 0 0 640 180;" xml:space="preserve" class="svg_freefuntimes">
<!--
この間に下記の順番で記述していくイメージ
①テキストのインラインSVG
②パスで一筆書きしたインラインSVG
-->
</svg>
テキストのインラインSVGについて
まずは筆記体のテキストのみのSVGを開き、pathの部分を全て入れる。
<!-- テキストのインラインSVG -->
<path d="いっぱい数字などが入っている">
<path d="いっぱい数字などが入っている">
<path d="いっぱい数字などが入っている">
<path d="いっぱい数字などが入っている">ここからそれぞれに対して、同じ任意のclass名を割り当てていく。
<!-- テキストのインラインSVG -->
<path class="cursive"
d="いっぱい数字などが入っている">
<path class="cursive"
d="いっぱい数字などが入っている">
<path class="cursive"
d="いっぱい数字などが入っている">
<path class="cursive"
d="いっぱい数字などが入っている">これで準備が完了だ。
パスで一筆書きしたインラインSVGについて
ペンツールで一筆書きしたものについては、pathが1つだけになるのだが、今回はtの横線、iの点部分もあるので、全部で3つに分かれている。
<!-- パスで一筆書きしたインラインSVG（マスク背景） -->
<g class="st0">
<path class="st2" d="いっぱい数字などが入っている">
<line class="st3" x1="388.7" y1="72.5" x2=“425" y2="72.5" />
<line class="st4" x1="442" y1="54" x2="455" y2="54" />
</g>ここで全体をgで囲み、それぞれに任意のclass名を付けていく。
なお、このパスで一筆書きしたインラインSVGはマスクされる背景になるので、全体をmaskタグで囲んでいく。
<!-- パスで一筆書きしたインラインSVG（マスク背景） -->
<mask id="mask">
<g class="st0">
<path class="st2" d="いっぱい数字などが入っている">
<line class="st3" x1="388.7" y1="72.5" x2=“425" y2="72.5" />
<line class="st4" x1="442" y1="54" x2="455" y2="54" />
</g>
</mask>これでHTML側の準備が完了した。
CSSの記述について
@charset "utf-8";
/* ==========================
初期設定
========================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
width: 100%;
}
body {
background-color: #ddd;
}
/* ==========================
SVGアニメーション
========================== */
/* svg共通 */
.ly_svgWrap {
text-align: center;
}
.svg_freefuntimes {
width: 400px;
height: auto;
max-width: 100%;
}
.ly_svgWrap + * {
margin-top: 20px;
}
/* パスで一筆書きしたインラインSVG */
.cursive {
mask: url(#mask);
}
/* パスで一筆書きしたインラインSVG */
.st1 {
display: inline;
}
.st2 {
fill: none;
stroke: #fff;
stroke-width: 11;
stroke-miterlimit: 10;
stroke-dasharray: 2580px;
animation: mask_animation 3s ease-in forwards;
}
@keyframes mask_animation {
0% {
stroke-dashoffset: 2580px;
}
100% {
stroke-dashoffset: 0;
}
}
.st3 {
fill: none;
stroke: #fff;
stroke-width: 10;
stroke-miterlimit: 10;
stroke-dasharray: 50px;
stroke-dashoffset: 50px;
animation: mask_animation2 0.3s ease-in forwards;
animation-delay: 3.3s;
}
@keyframes mask_animation2 {
0% {
stroke-dashoffset: 50px;
}
100% {
stroke-dashoffset: 0;
}
}
.st4 {
fill: none;
stroke: #fff;
stroke-width: 12;
stroke-miterlimit: 10;
stroke-dasharray: 20px;
stroke-dashoffset: 20px;
animation: mask_animation3 0.3s ease-in forwards;
animation-delay: 3.3s;
}
@keyframes mask_animation3 {
0% {
stroke-dashoffset: 20px;
}
100% {
stroke-dashoffset: 0;
}
}
/* ==========================
コンテンツの中身
========================== */
.ly_inner {
width: 1080px;
max-width: 100%;
margin: 100px auto;
padding: 20px;
}
.ly_inner h2 {
font-size: 150%;
font-weight: bold;
margin-bottom: 30px;
}
.ly_inner h3 {
font-size: 110%;
font-weight: bold;
margin-bottom: 10px;
}マスクをかけるため、下記のようにmaskを設定している。なお、cursiveや#maskの部分は任意のものを指定できる。
/* パスで一筆書きしたインラインSVG */
.cursive {
mask: url(#mask);
}前回の記事でも書いたが、インラインSVGのstyleで囲まれた部分のコードをCSSに移行し貼り付け、stroke-dasharray、stroke-dashoffset、 animationを使って設定していく。
なお、この時にfillやstrokeに色が指定されている場合は、白色（#fff）に設定しておくこと。これにより、マスクした時に色が変わってしまうことを防ぐことができる。
以上で実装完了となる。
今回はJavaScriptは用いていないので、これで終わりだ。
