こんにちは、はまたろうです。
先日shibajukuのサロンメンバーと「ほっこり」するクリスマスサイトを作成しました。
https://projects.shibajuku.net/scm/2022/
その中のクレーンゲームのメンバーとして実装に携わったのですが、
以下のような手書き風アニメーションをCSSのみで実装したので、備忘録としてブログにします。
有名なものでvivus.jsというライブラリがありますが、簡単なアニメーションであればCSSだけで実装できるので、ぜひ参考にしてもらえると嬉しいです！
必要なもの
- SVG画像
- イラストレーター
イラスレーターも難しい操作はないのでご安心を！
Contents
実装までの流れ
- SVG画像を用意する
- イラストレーターでマスク用のレイヤーを作成
- SVG画像をテキストエディタで編集
- CSSでアニメーションを実装
- 完成！
SVG画像を用意する
イラストレーターで文字を用意
手書き風アニメーションで実装したい文字をイラストレーターでを用意します。そのままテキストを打ち込んで、アウトライン化してもOKです。フォントは筆記体の方が上手くアニメーションされるかと思います。
イラストレーターでマスク用のレイヤーを作成
マスク用のパスを作成
文字の上から重ねるようにペンツールでパスを作成します。パスが作成出来たら文字が隠れるようにパスの幅を調整します。
あとでCSSで実装がしやすいようレイヤーに名前を付けておきましょう。
SVG画像をテキストエディタで編集
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-bc34b2f9-d6cd-46bd-83a1-ffec33520ee3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 454.36 91.53"><defs>
<style>.uuid-599df328-72d7-41a6-a5ef-655436684e97{fill:url(#uuid-7b62de5c-4f1a-4d72-8163-b32f247e9720);}.uuid-db15c2b8-429b-4af2-9e26-0bbe7b839590{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style>
<linearGradient id="uuid-7b62de5c-4f1a-4d72-8163-b32f247e9720" x1="12.14" y1="479.75" x2="453.14" y2="479.75" gradientTransform="translate(0 -438)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5d100"/><stop offset=".31" stop-color="#fff9e1"/><stop offset=".59" stop-color="#f5d100"/><stop offset="1" stop-color="#dbb400"/></linearGradient></defs><g id="uuid-bcce3d66-caff-420a-801c-f47ece33abe0">
<path id="uuid-5c604bf8-8773-402f-9ba0-86dff82c2e0f" class="uuid-599df328-72d7-41a6-a5ef-655436684e97" d="m44.84,52.3l-11.3-22.4-.4,7.5c-.1,2.2-.2,4.4-.3,6.5-.1,2.1-.2,4.2-.5,6.2-.2,1.9-.6,3.7-1.2,5.4-.5,1.7-1.3,3.1-2.3,4.3s-2.3,2.2-3.9,2.8c-1.6.7-3.6,1-6,1-1.1,0-2.1-.1-3.1-.2-1-.2-1.8-.4-2.6-.8s-1.3-.7-1.8-1.1c-.5-.4-.7-.9-.7-1.4,0-.4.1-.8.2-1.1.1-.4.3-.8.5-1.1.1-.2.4-.4.7-.6s.6-.3,1-.3c.2,0,.4.1.6.3.2.2.4.5.6.9.2.3.4.7.6,1.1.2.4.6.8.9,1.1.4.3.9.6,1.4.8s1.2.3,2,.3c1.6,0,2.9-.3,4-.8,1.1-.6,2-1.4,2.7-2.4s1.2-2.3,1.6-3.8.7-3.2.8-5c.1-1,.2-2,.2-3,.1-1,.2-1.9.2-2.9.1-1,.2-1.9.2-2.9.1-1,.2-2.1.2-3.2.1-1.6.2-3.1.3-4.6.1-1.5.1-2.8.2-4.1.1-1.2.1-2.4.1-3.4s.1-1.9.1-2.6c-.4-.7-.7-1.3-.9-1.8-.3-.5-.6-.8-.8-1-.3-.2-.6-.4-1-.5s-.8-.1-1.3-.1c-.4,0-.9.1-1.6.2-.6.1-1.2.4-1.9.7-.6.3-1.3.7-2,1.1-.6.4-1.2.9-1.7,1.5-.5.5-.9,1.1-1.2,1.8-.3.7-.5,1.4-.5,2.2,0,.7.1,1.2.2,1.6.2.4.4.7.6.9.2.2.5.3.7.4.2,0,.4.1.5.1.5,0,.9-.1,1.3-.2.3-.2.6-.4.9-.6.3-.2.5-.4.8-.6.2-.2.5-.3.8-.3.2,0,.5.1.8.2s.6.3.8.5.5.6.6,1c.2.4.2.9.2,1.5,0,.8-.2,1.6-.5,2.2s-.7,1.1-1.2,1.5-1.1.7-1.8.9c-.6.2-1.3.3-1.9.3-1,0-1.9-.2-2.7-.5-.8-.4-1.5-.8-2-1.4s-1-1.3-1.3-2.1-.4-1.7-.4-2.6c0-2.2.5-4.1,1.5-5.7,1-1.6,2.3-3,3.9-4.1s3.5-1.9,5.5-2.4c2.1-.5,4.2-.8,6.3-.8,1.7,0,3.1.2,4.3.5,1.1.3,2.1.8,2.9,1.4.8.6,1.4,1.2,1.9,2s1,1.6,1.4,2.4l8.2,16.8c2.1-4.2,4.1-8,5.8-11.3,1.8-3.4,3.4-6.3,4.9-8.8s2.9-4.7,4.2-6.5,2.6-3.2,3.8-4.4c1.2-1.1,2.4-2,3.6-2.5,1.6-.5,2.8-.8,4.1-.8,1.1,0,2,.2,2.7.7.7.5,1,1.2,1,2.1,0,.8-.1,1.5-.4,2.1s-.6.8-1.1.8c-.4,0-.7-.1-.9-.4-.2-.3-.4-.6-.6-1s-.4-.7-.7-1c-.3-.3-.7-.5-1.3-.5-.3,0-.7.1-1.2.3s-1,.5-1.6.9c-.5.4-1,.8-1.5,1.4s-.9,1.2-1.3,2-.6,1.5-.8,2.5-.3,2-.2,3.2c.1,1.3.2,2.9.3,4.6.1,1.8.3,3.6.5,5.7.2,2,.4,4.1.6,6.2.2,2.1.4,4.3.6,6.3.2,2.1.4,4.1.6,6,.2,1.9.4,3.7.6,5.2.2,1.5.3,2.9.5,3.9.1,1.1.3,1.8.3,2.2.1.6.3,1.1.5,1.5s.6.5,1.1.5c.6,0,1.1-.1,1.6-.3s.9-.4,1.3-.6l.5,1.2c-.4.3-.9.6-1.4.9-.6.3-1.2.7-2,1-.7.3-1.5.6-2.4.8s-1.8.3-2.8.3c-1.4,0-2.6-.2-3.4-.5-.8-.4-1.5-.8-1.9-1.3s-.7-1.1-.9-1.7c-.1-.6-.3-1.1-.3-1.6-.2-1.1-.4-2.3-.6-3.8-.2-1.5-.4-3.1-.6-4.8-.2-1.7-.4-3.5-.6-5.3-.2-1.8-.4-3.6-.5-5.3-.1-1.8-.3-3.4-.4-4.9s-.2-2.9-.3-4c-.6,1-1.2,2-1.8,3-.5.9-1,1.9-1.5,2.9s-1,2-1.5,3.1-1.1,2.3-1.7,3.5c-.6,1.3-1.2,2.7-1.9,4.2s-1.4,3.2-2.2,5.1h-3.2v-.3Zm43.3-3.1c0,.7.1,1.4.3,2.2.2.8.5,1.6.9,2.3s.8,1.6,1.4,2.3,1.2,1.3,1.9,1.9c.7.6,1.5,1,2.4,1.3s1.8.5,2.9.5c.7,0,1.4-.1,2-.2.6-.2,1.2-.4,1.8-.7.5-.3,1.1-.6,1.6-1s1-.8,1.5-1.2l.8.8c-.5.6-1.1,1.4-1.8,2.1-.8.8-1.7,1.5-2.7,2.2-1.1.7-2.3,1.2-3.7,1.7-1.4.4-3,.7-4.8.7s-3.6-.3-5.3-1c-1.7-.7-3.2-1.7-4.6-3-1.3-1.3-2.4-2.9-3.2-4.9-.8-2-1.2-4.2-1.2-6.9,0-1.9.2-3.6.7-5.2.5-1.6,1.1-3,1.9-4.3s1.8-2.4,2.9-3.3c1.1-1,2.3-1.8,3.5-2.4s2.4-1.1,3.7-1.4c1.3-.3,2.5-.5,3.7-.5,1.5,0,2.9.2,4,.5s2.1.8,2.8,1.3c.8.6,1.3,1.2,1.7,2,.4.7.6,1.5.6,2.3,0,1-.3,1.9-.8,2.7-.6.8-1.3,1.4-2.2,2l-12.7,7.2Zm6.3-6.4c.3-.2.5-.3.7-.5s.3-.4.4-.6c.1-.2.2-.5.2-.8.1-.3.1-.7.1-1.2s-.1-1.1-.2-1.7c-.1-.6-.3-1.2-.6-1.8-.3-.6-.6-1-1-1.4s-.9-.6-1.5-.6c-.8,0-1.4.2-1.9.7-.5.4-1,1-1.3,1.7s-.6,1.5-.8,2.4c-.2.9-.3,1.8-.4,2.7s-.2,1.8-.2,2.7v2.1l6.5-3.7Zm25.2-5.1c.8-1.2,1.6-2.3,2.5-3.3.4-.4.8-.8,1.2-1.2.4-.4.9-.8,1.3-1.1.5-.3,1-.6,1.5-.8.5-.2,1-.3,1.5-.3,1.1,0,1.9.3,2.5,1,.6.6.9,1.5.9,2.7,0,.7-.1,1.4-.2,2.1-.1.6-.3,1.4-.7,2.4h-.9c-.1-.6-.4-1.2-.9-1.6-.5-.4-1.1-.7-2-.7-.6,0-1.3.1-1.9.4-.6.2-1.2.5-1.8.9-.6.4-1.1.7-1.7,1.2-.5.4-1,.8-1.4,1.2v20.3c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8s-1.5.4-2.6.4-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9-.3-.4-.5-.7-.6-1.1-.1-.4-.1-.7-.1-.9v-24.3c0-.6-.1-1.1-.4-1.6s-.7-.7-1.4-.7c-.4,0-.7.1-.9.2s-.5.3-.8.5l-.7-.8c.5-.4,1-.8,1.6-1.2.6-.4,1.2-.7,1.9-1s1.4-.5,2.2-.7c.8-.2,1.6-.3,2.5-.3s1.7.1,2.3.4c.6.2,1.2.5,1.6.9s.7.8,1,1.3c.2.5.4,1,.5,1.5s.2.9.2,1.4c-.1.5-.1.8-.1,1.2Zm25.5,0c.8-1.2,1.6-2.3,2.5-3.3.4-.4.8-.8,1.2-1.2.4-.4.9-.8,1.3-1.1.5-.3,1-.6,1.5-.8.5-.2,1-.3,1.5-.3,1.1,0,1.9.3,2.5,1,.6.6.9,1.5.9,2.7,0,.7-.1,1.4-.2,2.1-.1.6-.3,1.4-.7,2.4h-.9c-.1-.6-.4-1.2-.9-1.6-.5-.4-1.1-.7-2-.7-.6,0-1.3.1-1.9.4-.6.2-1.2.5-1.8.9s-1.1.7-1.7,1.2c-.5.4-1,.8-1.4,1.2v20.3c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8-.6.2-1.5.4-2.6.4s-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9s-.5-.7-.6-1.1-.1-.7-.1-.9v-24.3c0-.6-.1-1.1-.4-1.6s-.7-.7-1.4-.7c-.4,0-.7.1-.9.2s-.5.3-.8.5l-.7-.8c.5-.4,1-.8,1.6-1.2.6-.4,1.2-.7,1.9-1,.7-.3,1.4-.5,2.2-.7.8-.2,1.6-.3,2.5-.3s1.7.1,2.3.4c.6.2,1.2.5,1.6.9.4.4.7.8,1,1.3.2.5.4,1,.5,1.5s.2.9.2,1.4c-.1.5-.1.8-.1,1.2Zm40.3-1.7c0,3.8-.4,7.5-1.1,11.1-.7,3.5-1.8,6.9-3.1,10s-2.8,5.9-4.6,8.5-3.7,4.8-5.8,6.6c-2.1,1.8-4.3,3.3-6.7,4.3-2.3,1-4.7,1.5-7.1,1.5-1.8,0-3.2-.3-4.2-.9s-1.5-1.4-1.5-2.5c0-.4.1-.8.2-1.2s.3-.7.5-1,.5-.5.8-.7.6-.2.9-.2c.4,0,.7.2,1,.6.2.4.5.8.8,1.3s.6.9,1.1,1.3c.4.4,1,.6,1.7.6.9,0,1.9-.2,2.9-.5s2-.8,3.1-1.4c1-.6,2.1-1.3,3.1-2.2,1-.9,2.1-1.8,3.1-2.9-.6-2.1-1.3-4.4-2-6.9-.8-2.5-1.6-5-2.4-7.5-.8-2.5-1.7-4.9-2.6-7.3-.9-2.4-1.7-4.4-2.6-6.2-.8-1.8-1.6-3.3-2.4-4.3-.8-1.1-1.5-1.7-2.1-1.7-.4,0-.7.1-.9.2s-.5.3-.8.5l-.6-.8c.4-.4.9-.7,1.3-1.1.5-.4,1-.7,1.6-1s1.4-.6,2.2-.8c.8-.2,1.8-.3,3-.3,1.3,0,2.4.3,3.5.9s2.1,1.6,3,3.2c.6,1.1,1.3,2.5,2,4.1s1.4,3.4,2.1,5.4c.7,2,1.4,4.1,2.1,6.4.7,2.3,1.5,4.7,2.2,7.2,1.3-2.7,2.3-5.6,3.1-8.6.8-3,1.2-6.2,1.2-9.4,0-1.1-.1-2.1-.2-2.9-.1-.8-.3-1.5-.5-2.1s-.4-1.1-.5-1.5-.2-.8-.2-1.1.1-.6.4-.8c.2-.2.6-.4.9-.5.4-.1.7-.2,1.1-.2.4-.1.7-.1.9-.1.6,0,1,.1,1.3.3.3.2.5.6.7,1,.1.4.2.9.2,1.5-.1.6-.1,1.3-.1,2.1Zm26-16.5c-.6,0-1.2.1-2,.3s-1.5.7-2.3,1.3-1.5,1.5-2.3,2.7c-.8,1.1-1.4,2.6-2,4.5-.6,1.8-1.1,4-1.4,6.6-.4,2.6-.5,5.7-.5,9.2s.2,6.3.5,8.8c.4,2.5.9,4.6,1.5,6.3s1.3,3.1,2.1,4.2c.8,1.1,1.6,2,2.5,2.6s1.8,1.1,2.6,1.3,1.7.3,2.5.3,1.6-.1,2.5-.3c.8-.2,1.6-.5,2.4-.9.8-.4,1.6-.9,2.3-1.4.8-.6,1.4-1.2,2.1-1.9l1.4,1.4c-.6.8-1.4,1.6-2.2,2.3-.9.8-1.9,1.5-3.1,2.2-1.1.7-2.4,1.2-3.9,1.6-1.4.4-3,.6-4.8.6-2.7,0-5.3-.5-7.6-1.6-2.3-1-4.4-2.7-6.1-4.9-1.7-2.2-3.1-5-4.1-8.4s-1.5-7.6-1.5-12.3.5-8.4,1.6-11.8c1-3.4,2.5-6.2,4.2-8.5,1.8-2.3,3.9-4,6.3-5.2,2.4-1.2,5-1.8,7.7-1.8,1.8,0,3.5.2,4.9.5,1.5.3,2.8.8,3.9,1.5,1.1.6,1.9,1.5,2.5,2.4.6,1,.9,2.1.9,3.3,0,.6-.1,1.2-.3,1.8-.2.6-.5,1.2-.9,1.7s-.8.9-1.4,1.2c-.6.3-1.2.5-2,.5-.7,0-1.2-.1-1.6-.4-.4-.3-.6-.7-.8-1.2s-.3-1-.3-1.6-.1-1.3-.1-1.9-.1-1.3-.2-1.9c-.1-.6-.2-1.2-.4-1.7s-.5-.9-.9-1.2c-.4-.1-1-.2-1.7-.2Zm24.4,17.5c.8-1.1,1.6-2.1,2.6-3,.4-.4.8-.7,1.3-1.1s1-.7,1.6-.9c.6-.3,1.1-.5,1.8-.7.6-.2,1.3-.2,1.9-.2,1.4,0,2.6.3,3.8.8s2,1.4,2.8,2.7c.8,1.3,1.3,3,1.7,5.1s.6,4.7.6,7.8-.3,5.6-.8,7.9c-.5,2.2-1.2,4.1-2.1,5.7s-1.9,2.8-3,3.8-2.2,1.8-3.3,2.3c-1.1.6-2.2.9-3.2,1.2-1,.2-1.9.4-2.7.4l-.3-1.3c.9-.2,1.8-.7,2.5-1.3s1.3-1.6,1.8-3.1c.5-1.4.9-3.4,1.1-5.8.3-2.4.4-5.5.4-9.3,0-2.6-.1-4.7-.4-6.3-.2-1.6-.5-2.8-.9-3.6s-.8-1.4-1.3-1.6c-.5-.3-1-.4-1.5-.4-.6,0-1.1.2-1.6.5s-.9.7-1.2,1.1c-.3.4-.6.8-.9,1.2-.2.4-.4.7-.6.9v20.9c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8-.6.2-1.5.4-2.6.4s-2-.1-2.6-.4c-.6-.2-1.1-.6-1.5-.9-.3-.4-.5-.7-.6-1.1s-.1-.7-.1-.9V20.4c0-.6-.1-1.1-.4-1.6-.3-.5-.7-.7-1.4-.7-.4,0-.7.1-.9.2-.2.1-.5.3-.8.5l-.6-.8c.5-.4,1-.8,1.6-1.2s1.2-.7,1.9-1,1.5-.5,2.2-.7c.8-.2,1.6-.3,2.5-.3,1.4,0,2.4.2,3.2.6.8.4,1.3.8,1.7,1.3s.6,1.1.6,1.7c.1.6.1,1.1.1,1.6v17h-.3Zm34.5.7c.8-1.2,1.6-2.3,2.5-3.3.4-.4.8-.8,1.2-1.2.4-.4.9-.8,1.3-1.1.5-.3,1-.6,1.5-.8.5-.2,1-.3,1.5-.3,1.1,0,1.9.3,2.5,1,.6.6.9,1.5.9,2.7,0,.7-.1,1.4-.2,2.1-.1.6-.3,1.4-.7,2.4h-.9c-.1-.6-.4-1.2-.9-1.6-.5-.4-1.1-.7-2-.7-.6,0-1.3.1-1.9.4-.6.2-1.2.5-1.8.9-.6.4-1.1.7-1.7,1.2-.5.4-1,.8-1.4,1.2v20.3c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8s-1.5.4-2.6.4-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9-.3-.4-.5-.7-.6-1.1-.1-.4-.1-.7-.1-.9v-24.3c0-.6-.1-1.1-.4-1.6-.3-.5-.7-.7-1.4-.7-.4,0-.7.1-.9.2s-.5.3-.8.5l-.7-.8c.5-.4,1-.8,1.6-1.2.6-.4,1.2-.7,1.9-1s1.4-.5,2.2-.7,1.6-.3,2.5-.3,1.7.1,2.3.4c.6.2,1.2.5,1.6.9s.7.8,1,1.3c.2.5.4,1,.5,1.5s.2.9.2,1.4c-.2.5-.1.8-.1,1.2Zm25.4,23c0,.3-.1.6-.2,1s-.3.7-.7,1.1c-.3.3-.8.6-1.5.8-.6.2-1.5.4-2.6.4s-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9-.3-.4-.5-.7-.6-1.1-.1-.4-.1-.7-.1-.9v-24.1c0-.6-.1-1.1-.4-1.6s-.7-.7-1.4-.7c-.4,0-.7.1-.9.2s-.5.3-.8.5l-.7-.8c.5-.4,1-.8,1.6-1.2.6-.4,1.2-.7,1.9-1,.7-.3,1.4-.5,2.2-.7.8-.2,1.6-.3,2.5-.3,1.4,0,2.4.2,3.2.6.8.4,1.3.8,1.7,1.3.4.5.6,1.1.6,1.7.1.6.1,1.1.1,1.6v24.5h.1Zm-10.6-36.8c0-.6.1-1.1.4-1.7.3-.5.6-1,1.1-1.4s1-.7,1.6-.9,1.3-.3,2-.3,1.4.1,2,.3,1.2.5,1.6.9.8.9,1.1,1.4c.3.5.4,1.1.4,1.7s-.1,1.2-.4,1.7c-.2.5-.6,1-1.1,1.4s-1,.7-1.6.9c-.6.2-1.3.3-2,.3s-1.4-.1-2-.3c-.6-.2-1.1-.5-1.6-.9s-.8-.9-1.1-1.4c-.2-.5-.4-1.1-.4-1.7Zm28.5,9.7c-.5,0-.9.1-1.4.2-.4.1-.8.3-1.1.6-.3.3-.6.6-.8,1.1-.2.4-.3.9-.3,1.5,0,.8.3,1.6.9,2.4s1.3,1.6,2.2,2.5c.9.9,1.9,1.8,2.9,2.7s2,1.9,2.9,2.9,1.6,2.1,2.2,3.3.9,2.4.9,3.8c0,1.5-.3,2.8-.8,4s-1.2,2.2-2.2,3c-.9.8-2.1,1.4-3.4,1.9-1.3.4-2.8.6-4.5.6-1.4,0-2.7-.2-3.9-.6-1.2-.4-2.2-.9-3.1-1.5s-1.7-1.2-2.3-1.9-1.1-1.3-1.5-1.8l1.1-.8c.3.3.6.7,1,1,.4.4.9.7,1.4,1s1.1.6,1.7.8,1.2.3,1.8.3c1.5,0,2.7-.4,3.7-1.1,1-.7,1.4-1.8,1.4-3.2,0-.8-.3-1.6-.8-2.4-.5-.9-1.2-1.7-2-2.6-.8-.9-1.6-1.8-2.6-2.8-.9-1-1.8-1.9-2.6-3-.8-1-1.4-2.1-2-3.2-.5-1.1-.8-2.2-.8-3.4,0-1.3.3-2.5.8-3.4.5-1,1.2-1.8,2.1-2.4s1.9-1.1,3-1.4,2.3-.5,3.5-.5c1.4,0,2.7.1,3.8.4,1.1.2,2.1.6,2.9,1.2.8.5,1.5,1.1,1.9,1.9.5.8.7,1.7.7,2.7,0,.8-.3,1.5-.8,2.1-.5.6-1.2.9-2.2.9-.9,0-1.6-.2-2.1-.6-.5-.4-.7-.9-.7-1.6,0-.4.1-.8.3-1,.2-.2.5-.4.8-.6s.5-.3.7-.4.3-.3.3-.5c0-.6-.3-1-.9-1.4-.3-.6-1.1-.7-2.1-.7Zm23.7.1v23.1c0,1.1.2,1.9.6,2.3.4.4,1,.6,1.7.6.6,0,1.1-.2,1.5-.5s.8-.7,1.1-1.1c.4-.4.7-.9,1-1.5l1,.4c-.3.7-.7,1.4-1.1,2.2s-1,1.5-1.7,2.2-1.6,1.2-2.7,1.7-2.4.7-4,.7c-.9,0-1.8-.1-2.7-.4-.8-.3-1.6-.7-2.2-1.3s-1.2-1.3-1.6-2.2-.6-1.9-.6-3.2v-23h-3.5v-2.2c.6,0,1.4-.1,2.4-.4s2.1-.8,3.2-1.5,2.1-1.7,3.1-2.8,1.6-2.7,2-4.4h2.5v9.1h5.1c1.7,0,2.5-.3,2.5-.8,0-.2-.1-.3-.3-.4-.2-.1-.4-.2-.7-.3-.2-.1-.5-.3-.7-.5s-.3-.6-.3-1c0-.6.2-1,.5-1.4.4-.3.9-.5,1.4-.5.4,0,.7.1,1,.2s.5.4.7.6.3.5.4.9c.1.3.2.7.2,1,0,1.4-.4,2.4-1.2,3.2-.8.8-2,1.2-3.8,1.2,0,0-4.8,0-4.8,0Zm38.2,27c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8s-1.5.4-2.6.4-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9-.3-.4-.5-.7-.6-1.1-.1-.4-.1-.7-.1-.9v-22.1c0-.3,0-.6-.1-.9-.1-.3-.2-.6-.4-.8-.2-.2-.4-.4-.6-.6s-.5-.2-.9-.2c-.6,0-1.1.2-1.7.5-.5.3-1.1.7-1.5,1.1-.5.4-.9.8-1.2,1.2-.3.4-.6.7-.7.9v20.9c0,.3,0,.6-.1,1s-.3.7-.6,1.1c-.3.3-.8.6-1.4.8s-1.5.4-2.6.4-2-.1-2.6-.4c-.6-.2-1.1-.6-1.4-.9-.3-.4-.5-.7-.6-1.1-.1-.4-.1-.7-.1-.9v-24.1c0-.6-.1-1.1-.4-1.6s-.7-.7-1.4-.7c-.4,0-.7.1-.9.2s-.5.3-.8.5l-.7-.8c.5-.4,1-.8,1.6-1.2.6-.4,1.2-.7,1.9-1s1.4-.5,2.2-.7c.8-.2,1.6-.3,2.5-.3,1.4,0,2.4.2,3.2.7.8.4,1.3,1,1.7,1.6s.6,1.3.6,2c.1.7.1,1.2.1,1.7,1-1.1,2-2.1,3.2-3,.5-.4,1-.7,1.5-1.1.6-.4,1.1-.7,1.7-.9.6-.3,1.2-.5,1.8-.7s1.2-.2,1.9-.2c1.2,0,2.2.2,3.1.7.9.4,1.5,1,2.1,1.6.5.6.9,1.2,1.1,1.9.2.7.4,1.2.4,1.8,1-1.1,2.1-2.1,3.2-3,.5-.4,1-.7,1.5-1.1s1.1-.7,1.7-.9c.6-.3,1.2-.5,1.8-.7.6-.2,1.2-.2,1.9-.2,1.2,0,2.2.2,3.1.7.9.4,1.5,1,2.1,1.8.5.7.9,1.6,1.1,2.5s.4,1.8.4,2.8v19.9c0,.2.1.4.2.6.1.2.2.3.4.5.2.1.4.2.7.2.4,0,.8-.1,1.1-.4.3-.3.6-.6.9-.9l.8.7c-.3.4-.7.9-1.2,1.5-.5.5-1.1,1-1.7,1.5s-1.4.9-2.3,1.2-1.8.5-2.9.5c-.9,0-1.7-.1-2.4-.4-.7-.2-1.2-.5-1.7-.9s-.8-.9-1-1.4c-.2-.6-.3-1.2-.3-1.8v-21.2c0-.3,0-.6-.1-.9-.1-.3-.2-.6-.4-.8-.1-.2-.3-.4-.6-.6-.2-.2-.5-.2-.9-.2-.6,0-1.1.2-1.7.5-.5.3-1.1.7-1.5,1.1-.5.4-.9.8-1.2,1.2-.3.4-.6.7-.7.9v20.9h-.8Zm39-13.4c0-.5-.2-.9-.5-1.2s-.8-.4-1.3-.4c-.7,0-1.4.2-2.1.5-.6.3-1.2.8-1.7,1.5s-.9,1.4-1.2,2.4c-.3.9-.4,2-.4,3.3,0,1.2.1,2.2.2,3,.2.8.4,1.4.7,1.9.3.5.7.8,1.1,1s.8.3,1.2.3c.5,0,1.1-.1,1.5-.4.5-.3.9-.7,1.2-1.1.4-.4.6-.9.8-1.5.2-.5.3-1.1.3-1.6v-7.7h.2Zm-5-13.7c-.7,0-1.4.1-2,.2-.6.2-1.1.4-1.6.6s-.8.5-1,.8-.4.6-.4.8c0,.3.2.5.5.7.3.1.7.3,1.1.5s.8.4,1.1.8c.3.3.5.8.5,1.5,0,.4-.1.8-.3,1.2-.2.4-.4.7-.7,1-.3.3-.6.5-1.1.7-.4.1-.8.2-1.2.2-1.2,0-2.1-.4-2.8-1.2-.7-.8-1.1-1.8-1.1-3.2,0-1.3.3-2.4,1-3.2.7-.9,1.5-1.7,2.6-2.2,1.1-.6,2.3-1,3.7-1.3,1.4-.3,2.7-.4,4.1-.4,1.6,0,3.2.2,4.7.5,1.5.4,2.8.9,3.9,1.7,1.1.8,2.1,1.8,2.7,2.9.7,1.2,1,2.6,1,4.3v18.3c0,.2.1.4.2.6.1.2.2.3.4.5.2.1.4.2.7.2.4,0,.7-.1,1-.4.3-.3.6-.6.9-.9l.7.7c-.3.4-.7.9-1.1,1.4s-1,1-1.6,1.5-1.4.8-2.2,1.2c-.8.3-1.8.5-2.8.5-1.3,0-2.5-.4-3.5-1.2s-1.7-2-2-3.6c-.7.9-1.4,1.6-2.1,2.2-.7.6-1.4,1.1-2.2,1.5s-1.5.6-2.3.8-1.5.2-2.3.2c-1,0-2-.2-2.9-.5s-1.8-.8-2.5-1.5-1.3-1.6-1.8-2.7c-.4-1.1-.7-2.4-.7-4,0-1.9.4-3.4,1.1-4.7.8-1.2,1.7-2.2,2.9-3,1.2-.8,2.6-1.5,4.2-2.1s3.2-1.2,4.8-1.8c1.2-.5,2.1-1.2,2.6-2.1.6-1,.8-1.9.8-2.9,0-1.5-.5-2.8-1.4-3.7-.8-.9-2-1.4-3.6-1.4Zm32.8,0c-.5,0-.9.1-1.4.2-.4.1-.8.3-1.1.6-.3.3-.6.6-.8,1.1-.2.4-.3.9-.3,1.5,0,.8.3,1.6.9,2.4s1.3,1.6,2.2,2.5c.9.9,1.9,1.8,2.9,2.7s2,1.9,2.9,2.9,1.6,2.1,2.2,3.3.9,2.4.9,3.8c0,1.5-.3,2.8-.8,4s-1.2,2.2-2.2,3c-.9.8-2.1,1.4-3.4,1.9-1.3.4-2.8.6-4.5.6-1.4,0-2.7-.2-3.9-.6-1.2-.4-2.2-.9-3.1-1.5s-1.7-1.2-2.3-1.9-1.1-1.3-1.5-1.8l1.1-.8c.3.3.6.7,1,1,.4.4.9.7,1.4,1s1.1.6,1.7.8,1.2.3,1.8.3c1.5,0,2.7-.4,3.7-1.1,1-.7,1.4-1.8,1.4-3.2,0-.8-.3-1.6-.8-2.4-.5-.9-1.2-1.7-2-2.6-.8-.9-1.6-1.8-2.6-2.8-.9-1-1.8-1.9-2.6-3-.8-1-1.4-2.1-2-3.2s-.8-2.2-.8-3.4c0-1.3.3-2.5.8-3.4.5-1,1.2-1.8,2.1-2.4s1.9-1.1,3-1.4,2.3-.5,3.5-.5c1.4,0,2.7.1,3.8.4s2.1.6,2.9,1.2c.8.5,1.5,1.1,1.9,1.9.5.8.7,1.7.7,2.7,0,.8-.3,1.5-.8,2.1s-1.2.9-2.2.9c-.9,0-1.6-.2-2.1-.6-.5-.4-.7-.9-.7-1.6,0-.4.1-.8.3-1,.2-.2.5-.4.8-.6s.5-.3.7-.4.3-.3.3-.5c0-.6-.3-1-.9-1.4-.3-.6-1.1-.7-2.1-.7Z"/>
<path id="uuid-c197b626-417f-4de7-8fea-845e7378621e" class="uuid-db15c2b8-429b-4af2-9e26-0bbe7b839590" d="m429.04,56.9c.5.3,4,3.4,4.9,3.7.7.2,3.1,1.6,4,1.7,2.9.2,5.8-.2,7.6-3.7,1.8-3.4.2-6.6-.2-7.4-.8-1.6-.6-3.6-2.5-5.4-4.3-4-5.9-3.8-7.9-6.4-1.5-2-3.5-5.9-2.1-8.3,2.3-4.1,14.1-2.9,15.4,1,.6,1.9-1.3,4.1-3.3,6.4-14.4,16.8-16.7,24.6-20.2,23.6-5.3-1.6-4.4-7-6.2-13.9-.7,0-2.8-7.1-6.7-5.5-2.5,1-2.8.9-3.6,1.4-2.9,1.8-6,5.7-5.4,10.3.5,3.8,3.4,7.9,6.8,8.1,5.4.3,8.9-9.8,9.1-10.3.8-2.5.2-2.3,1.2-8.6,1.2-8,.5-8.1-.8-9.9-1.5-2.1-2.8-3.7-6.7-3.8-3-.1-5.9-.1-7.7,1.7-1.7,1.7-1.1,3.6-1.4,7.4-.3,4.3-1.3,10-6.4,19.9-1.1,2.1-3.7,3.3-5.3,3.4s-3.2-1.8-3.8-3.5c-.5-1.5-.1-2.2,0-5.2.1-2.5-.2-2.5-.3-5.2,0-1.1-.1-4.2.6-7.9.8-4.4,2-5.5,1.2-6.7-1.1-1.7-4.9-1.4-7.3-.6-11.4,3.9-10.9,29.1-11.3,29-.2-.1-1.4-3.4-1-8.6.1-1.7.1-2.5.3-4.9.3-3.4.4-5.1.9-6.4,1.2-3.3,3-3.8,2.8-5.2-.4-2.2-5-4.4-8.3-3.7-10.9,2.2-13.6,35.2-13.5,35.2,0,0,.3-1.5,1.8-8.3,0,0,1.1-5.2,1.8-10.7.4-2.9.6-4.4.6-6.4.1-3.8.1-6.6-1.5-9.5-1-1.7-3.4-5.1-4.9-4.6-2.9.9,2.4,13.8-3.7,22.9-2.6,3.8-6.4,5.7-8.9,6.7,0,0-3.2,1.5-4.4.1-.6-.8-.5-4.4-.5-7.1.2-.7-.2-.7-.2-8.6-.5-8.8,1.8-15.1,1.2-17.7-.8-3.5-1.5-4.5-.8-5.5,2.5-3.3,15.6,1,15.6,4.3,0,1.2-1.7,3-1.8,3.1,0,0-1,.7-2,1.4-7.2,4.8-13.3,2.4-19.8,3.8-14.8,3.2-23.7,24.5-21,27.4.4.5,1.9.5,4.8.7,2.5.1,3.8.2,5.2-.3,1.9-.6,3-1.7,3.7-2.4,1.1-1.2,2.3-2.3,2.4-3.7.1-2-2.2-3.5-4.3-5.2-4.1-3.2-10.9-8-10.1-12.5.4-2.7,2.8-6.2,6.3-6.6,3.3-.3,6.8,2.1,7.1,4.8.2,1.1-.3,2.1-1.7,4.1-2.4,3.4-3.6,5.1-6.5,7.5-9.4,7.7-11.8,19.9-15.6,19-1-.2-1.5-1.1-2.4-2.5-1.8-2.8-1.5-5.9-1.3-7.6.3-2.9.1-2.9.3-5.5s0-3,0-6.1c0-5.5-.2-3.6-.5-7.8-.2-1,.3-5.4-1.3-4.6-11.6,5.6,1.1-7.7-.6-8.4-2.1-.5-9.2,6.3-10.5,7.1-2,1.2-2.1,3.8-3.1,6.2-5.5,13.1-4.1,24.5-5.1,24.5-.9,0-2.3-6.9-2.9-13.3-.6-6.7-.2-9.5-2.4-11.9-2.6-2.8-7.4-3.6-8.4-2.2-1.2,1.6,3.8,4.8,6.2,12.6.8,2.5,2.5,7.8.3,13.5-.5,1.2-2.9,7.5-9.2,9.8-6,2.2-12.3-.5-12.5-1.8-.2-1.2,4.3-1.3,6.4-5.2.7-1.2,1-2.5,1.2-12.8.1-4.4,0-5,0-5.5-.3-3.1-.8-9.9-4-11-2.6-.9-5.9,2.3-6.5,2.8-9.8,7.9-4.9,29.5-6.4,29.6-.5,0-1.2-2.7-1.5-4.3-.5-2.9-.2-4.9,0-7.9.2-2.6-.1-1.6,0-7.9.1-4.7.2-5.5.3-11.6.1-3.7.1-5.6,0-7,0-1.2-.6-10-2.1-10.1-2.6-.2-11.5,25.9-8.3,39.4.4,1.3,1.6,6-.7,8.3-.7.7-1.3.7-5.5,2.5-3.4,1.5-3.1,1.6-3.8,1.7-4.6.9-9-3.4-9.5-4-.6-.5-2.1-2.2-3.4-5.5-1-2.6-2.6-5.1-2.4-12.7-.8-6.6,1.1-10.5,2.7-16.6,1-4.7,1.6-7,3.1-8.6,3.5-3.6,11.2-5.2,15.9-.9,4.3,3.8-1.3,12.7-1.4,13.3l-5.7,6.2c-3.7,7.3-32,47.2-37.3,46-3.9-.9-8.5-1.9-12.5-3-6.6-1.7-11.7-3.5-10.4-4.3,2.5-1.6,5.2-3,6.6-2.4,1.5.6,3.8,1.5,6.1.7,3.4-1.2,2.9-4.9,7.2-7.6,2-1.3,2.4-.6,4.1-1.7,3.1-2,3.2-5.3,5.4-13.2,2-6.9,3-8.4,4.1-14.6,1.3-6.8.6-8.3-.3-9-1.5-1.1-4.5-.3-6.4,1.1-8.3,6.2-1.3,29.5-2.4,29.7-.2,0-.5-1.7-2.1-4.9-1.1-2.1-1.5-2.4-3.1-5.5-1.3-2.6-1.6-3.6-1.8-4.6-.3-1.7,0-2.4,0-3.7-.1-5.1-5.5-8.4-4.9-9.2.3-.4,2.2,0,2.4.9.4,1.8-6.4,5.9-9.1,4.2-2.1-1.3-1.1-5.5-2.8-6-1-.3-2,.8-2.8,1.5-1.8,1.5-2.5,3.5-2.8,4.6-2.1,7.4-3.1,26.1-4.9,26.3-.7.1-2-3.3-2.4-6.1-.1-.5-.1-1.1,0-4.6.1-2.5.2-3.5.3-6.1.4-7.8.1-6.1.3-8.3.3-2.4.5-3.2,0-4.3-.9-1.9-3.1-2.5-4.3-2.8-4-1.1-7.5.1-9.2.9,0,0-2.8,1.7-3.6,3.8-.4,1.1-.2,2.1.5,4.5,2.1,6.9,2.9,7.3,2.8,9.2-.2,2.3-1.4,3.9-3.7,6.7-.8,1.1-5.3,6.5-7.5,5.5-1-.4-1.1-2.2-1.4-5.8-.2-2-.3-5.5.3-10.1.2-1.7.3-2.5.6-3.7.9-4.1,2.1-4.9,1.8-7-.5-2.5-2.6-3.9-2.8-4-1.7-1-4.5-1.5-6.1-.3-3.2,2.3.6,8.9-1.9,19.6-.5,1.9-1,3.6-2.4,5.1-2.9,3.3-7.4,3.5-8.6,3.5-1.8.1-4.5.2-6.7-1.5-.9-.6-1.6-1.5-3.4-7.6-2.3-8.1-2-9.8-1.2-11,.6-1,.9-.6,2.4-2.1,3.3-3.3,2.6-5.8,5.1-7.4,1.4-.9,3.5-1.1,5.1-.4,3.1,1.4,3.3,5.7,3.3,6,.1,4.5-3.8,7.7-4.5,8.2-4.8,3.9-9.8,1-13.3,4.7-3.6,3.7-.2,8.7-4.3,12.5-2.8,2.6-7.7,3.1-9.1,1.5-.7-.8-.2-1.5-.7-4-.4-2.5-1.1-3.2-1.8-5.2-.4-1.7-.5-2.8-.5-7.3,0-9.4.1-8.4,0-9.8-.5-6.1-2.1-6.5-2.1-11.6,0-3.4,0-6.2,1.8-8.6,3.9-5.1,12.4-3,13.2-6.3.3-1.4-.9-3-1.9-3.7-2.1-1.6-4.9-.6-5.3-.5-1.9.7-2.7,1.9-4.5,4.1-5.4,6.7-6.2,6.1-7.9,9.5-.5,1-1,2.9-2.2,6.8-.3.8-1.3,4.2-2.1,7.5-2.7,10.7-2.3,17-3.7,17.1-.6,0-1.4-.8-2.8-5.2-2.9-5.5-3.1-5.8-3.1-5.8-4.7-9.1-7-17.4-7-17.4-2.6-9.5-1-12.3-3.7-13.8-2.9-1.6-5,1.1-14.7,2.1-5.2.5-6.8-.1-8.9,1.5-1.4,1.1-3,3-3.9,10.1-1.4,11.1,1.8,14.7,3.9,29.7.1,1.1.5,3.8,2.5,6.4.7.8,2.7,3.5,6.2,4,.7.1,2.5.3,4.5-.5,3.2-1.4,4.6-4.5,5.8-7.2,2.1-5,2.2-9.5,2.4-14.7v-15.9c.2-2.2.5-3.1,0-4.6-.7-1.9-2.3-4-3.8-3.9-1.2.1-1.2,1.4-3.3,2.9-.3.2-.8.6-3.9,1.8-4.4,1.8-4.9,1.7-5.5,2.5-1.2,1.7-.5,4.1-.1,5.4.7,2.3,2.6,5.4,4.3,5.2,1.1-.2,1.3-1.4,2.8-3.1,1.6-1.8,3.3-2.8,4.6-3.4"/></g></svg>SVGをVS codeで開くと上記のような形で開くかと思います。が、ちょっととっつきにくいですよね…
ですが、変更が必要な箇所は<path>のid名とclass名の変更のみです。
見やすく整形した形は以下になります。
SVGファイルの中に<style>を残しておく場合はこちらのクラス名も一緒に変更しておきましょう。
See the Pen pre-animationText by 長濱元基 (@hamataro) on CodePen.
ここではもとの文字のidをtext、classをbaseTextに、マスクのパスのidをmask、classをmaskに変更しています。
CSSでアニメーションを実装
使用するCSSのプロパティ
今回使用するCSSのプロパティはstroke-dasharrayとstroke-dashoffsetの2つです。
SVGの各プロパティについてはこちらの記事がとても分かりやすかったです。
SVGのプロパティを理解してアニメーションさせてみよう | 株式会社LIG
https://liginc.co.jp/312143
stroke-dasharrayはイラストレーターで作成したパスを破線にして、線の長さと線の間隔を決めてくれるプロパティです。
stroke-dashoffsetで線の始まりの位置を決めることができます。
See the Pen Untitled by 長濱元基 (@hamataro) on CodePen.
左と真ん中の例ではstroke-dashoffsetが異なる為、描画される線がずれていることが分かるかと思います。右の例では要素の長さが100pxなのでstroke-dasharrayを100pxで指定するとstroke-dashoffsetの値だけずれて始まっているように見えます。
これらを利用してアニメーションを作っていきます。
アニメーションの指定
イラストレーターで作成したパスにテキスト全体が重なるようstroke-dasharrayを指定。時間経過とともにstroke-dashoffsetで位置をずらしていくことで、マスクで覆われたテキストが徐々に表示されます。
↓コードはこちら
See the Pen Untitled by 長濱元基 (@hamataro) on CodePen.
今回はブログ用に分かりやすくパスの色と背景色を変えていますが、背景色と同じ色を指定してあげれば手書き風アニメーションの完成です。
まとめ
いかがでしたしょうか？
今回はJSのプラグインを使わずに手書き風アニメーションを実装する方法をご紹介させていただきました。
簡単なアニメーションのみであればCSSだけで手軽におしゃれなアニメーションを実装できますので、ぜひ試してみてください。
