SVGでさらさら筆記体アニメーションを作ろう

SVGをつかった筆記アニメーションを作ろう

避けて通ってきたsvgだけど、避けられなくなったので作ってみた。
おもったより簡単だったかも。
大変なのはIllustratorでパスを作るところかも。

DEMO
http://deep-space.blue/testing/svg-animation/

参考

http://ascii.jp/elem/000/000/901/901319/

それでは作ってみよう

まずはsvgを作る作業。

下がお手本。作りたい姿。
上はトレス。

筆記アニメーションをつなげたいところは一本のパスになるように、Illustratorで書き直す。
パスが得意な人に頼んだ方がいいかも。

出来上がったらsvgに書き出す。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 381.3 88.4" style="enable-background:new 0 0 381.3 88.4;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
	.st1{fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
</style>
<title>アセット 1</title>
<g id="レイヤー_2">
	<g id="レイヤー_2-2">
		<path class="st0" d="M2.5,63.8c0,0,6.6-23.9,12.5-21.3s0.7,20,3,28.5s4.9,12.8,11.8,13.1s16.1-3,18-15.1s0-25.2,0-25.2
			s-0.2,23.3,0.9,27.5S52,84.5,60.9,84.1S77.3,77.2,78.2,73s3.3-8.8,2.3-17.7s-2-10.8-5.6-10.8s-7.5,5.2-5.2,15.7
			s10.5,11.5,14.4,10.5s7.9-2,10.2-8.8s9.2-21,7.5-24.9s-3.6-5.2-5.2-3.3s-4.1,6.5-0.3,9.8s1.6,3.6,9.5,2s14.1-3.3,16.7,2
			s-6.2,21-3.3,27.5s5.6,9.9,11.5,9.2s25.2-22.3,26.6-41c0,0-2,28.5,0,34.4s8.5,11.5,17,3.3c7-6.8,10.3-13.6,11.2-15.7
			c0.2-0.4,0.3-60.2,0.3-60.2v60.2v3.3c0,0,1.3,12.8,10.5,15.1s12.5-2.6,15.4-5.9c4.1-4.3,7.1-9.5,8.8-15.1c0-0.1,0.1-57.7,0.1-57.8
			l0,57.7v5.3c0,0,1.7,15.4,14.1,17.2s20.6-21.2,20.6-21.2c0.2-1.1,1.3-1.8,2.4-1.6c0.2,0,0.4,0.1,0.6,0.3c2.3,1,25.8,14.1,33.8-6.6
			c3.3-8.5-10.5-15.1-20.6-12.1s-13.8,10.5-14.8,13.8s-2,17.4,9.2,23.6c12,6.8,27.1,3.4,35.1-7.9c8.5-12.1,9.8-28.2,16.1-29.5
			s8.2,3.3,8.5,9.5s0,32.6,0,32.6s0-32.6,1.6-35.9s10.8-11.8,21.3-3c6.2,5.2-3.3,35.3,9.5,37.4c9.2,1.5,17.7-14.8,21-21.6"/>
		<line class="st0" x1="250" y1="25.1" x2="220.5" y2="25.1"/>
		<line class="st1" x1="157.8" y1="25.8" x2="157.8" y2="26.2"/>
		<line class="st0" x1="214.6" y1="25.1" x2="185.8" y2="25.1"/>
	</g>
</g>
</svg>

pathってなっているのが一番長い線。lineはそれぞれ、iの点とtの横棒。
class="st1″だけ、styleで太くなっているので、これがillustratorで太くしたiの点だな…とあたりをつける。
実はtの横棒も下が右のtの線なので、並び替えてあげた方がわかりやすい。

いらないidなどを取っ払ってすっきりさせて、css(今回はscss)を設定。

<div id="demo01">
    <svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
         y="0px" viewBox="0 0 381.3 88.4" style="enable-background:new 0 0 381.3 88.4;" xml:space="preserve">
        <g>
            <path class="st0 path01" d="M2.5,63.8c0,0,6.6-23.9,12.5-21.3s0.7,20,3,28.5s4.9,12.8,11.8,13.1s16.1-3,18-15.1s0-25.2,0-25.2
                  s-0.2,23.3,0.9,27.5S52,84.5,60.9,84.1S77.3,77.2,78.2,73s3.3-8.8,2.3-17.7s-2-10.8-5.6-10.8s-7.5,5.2-5.2,15.7
                  s10.5,11.5,14.4,10.5s7.9-2,10.2-8.8s9.2-21,7.5-24.9s-3.6-5.2-5.2-3.3s-4.1,6.5-0.3,9.8s1.6,3.6,9.5,2s14.1-3.3,16.7,2
                  s-6.2,21-3.3,27.5s5.6,9.9,11.5,9.2s25.2-22.3,26.6-41c0,0-2,28.5,0,34.4s8.5,11.5,17,3.3c7-6.8,10.3-13.6,11.2-15.7
                  c0.2-0.4,0.3-60.2,0.3-60.2v60.2v3.3c0,0,1.3,12.8,10.5,15.1s12.5-2.6,15.4-5.9c4.1-4.3,7.1-9.5,8.8-15.1c0-0.1,0.1-57.7,0.1-57.8
                  l0,57.7v5.3c0,0,1.7,15.4,14.1,17.2s20.6-21.2,20.6-21.2c0.2-1.1,1.3-1.8,2.4-1.6c0.2,0,0.4,0.1,0.6,0.3c2.3,1,25.8,14.1,33.8-6.6
                  c3.3-8.5-10.5-15.1-20.6-12.1s-13.8,10.5-14.8,13.8s-2,17.4,9.2,23.6c12,6.8,27.1,3.4,35.1-7.9c8.5-12.1,9.8-28.2,16.1-29.5
                  s8.2,3.3,8.5,9.5s0,32.6,0,32.6s0-32.6,1.6-35.9s10.8-11.8,21.3-3c6.2,5.2-3.3,35.3,9.5,37.4c9.2,1.5,17.7-14.8,21-21.6"/>
            <line class="st1 path02" x1="157.8" y1="25.8" x2="157.8" y2="26.2"/>
            <line class="st0 path03" x1="185.8" y1="25.1" x2="214.6" y2="25.1"/>
            <line class="st0 path04" x1="220.5" y1="25.1" x2="250" y2="25.1"/>
        </g>
    </svg>
</div>
.st0{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.st1{fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}


$len01:1260;
$len02:1;
$len03:30;

#demo01{
    .path01{
        fill:none;
        stroke-dasharray: $len01;
        stroke-dashoffset:$len01;
        animation: stroke1 6s 1s ease-in-out alternate forwards;
    }
    .path02{
        fill:none;
        stroke-dasharray: $len02;
        stroke-dashoffset:$len02;
        animation: stroke2 0.5s 7.1s ease alternate forwards;
    }
    .path03{
        fill:none;
        stroke-dasharray: $len03;
        stroke-dashoffset:$len03;
        animation: stroke3 0.5s 7.2s ease alternate forwards;
    }
    .path04{
        fill:none;
        stroke-dasharray: $len03;
        stroke-dashoffset:$len03;
        animation: stroke3 0.5s 7.7s ease-out alternate forwards;
    }

}

@keyframes stroke1{
    0%{stroke-dashoffset:$len01;}
    100%{stroke-dashoffset:0;}
}

@keyframes stroke2{
    0%{stroke-dashoffset:$len02;}
    100%{stroke-dashoffset:0;}
}

@keyframes stroke3{
    0%{stroke-dashoffset:$len03;}
    100%{stroke-dashoffset:0;}
}

それぞれのパスに、stroke-dasharrayとstroke-dashoffsetを設定して、それをanimationで動かしているのだが、その値はパスの長さに合わせて調節しないといけない。
scssの変数が便利。

cssに展開するとこんな感じ。

.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round; }

.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round; }

#demo01 .path01 {
  fill: none;
  stroke-dasharray: 1260;
  stroke-dashoffset: 1260;
  animation: stroke1 6s 1s ease-in-out alternate forwards; }
#demo01 .path02 {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: stroke2 0.5s 7.1s ease alternate forwards; }
#demo01 .path03 {
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: stroke3 0.5s 7.2s ease alternate forwards; }
#demo01 .path04 {
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: stroke3 0.5s 7.7s ease-out alternate forwards; }

@keyframes stroke1 {
  0% {
    stroke-dashoffset: 1260; }

  100% {
    stroke-dashoffset: 0; } }
@keyframes stroke2 {
  0% {
    stroke-dashoffset: 1; }

  100% {
    stroke-dashoffset: 0; } }
@keyframes stroke3 {
  0% {
    stroke-dashoffset: 30; }

  100% {
    stroke-dashoffset: 0; } }

これで、筆記アニメーション付き筆記体svgの出来上がり。
適宜ベンダープレフィックスをつけてどうぞ。

http://deep-space.blue/testing/svg-animation/