テキストを手書き風にアニメーションさせるって何? 簡単に言うとこんな感じです。 ちょっと分かりにくいですが、テキストを手書き風に見せるということです。 用意するもの ・SVG画像のテキスト ・html ・CSS 始めに「SVG画像って何?」 普通画像というものはピクセルで書かれているのですが、SVG画像は点と点をつないで書いています。(厳密には座標) なので、その値をhtml内にコードとして書くことによってその座標を読み取り、文字になるのです。 さぁ早速コードを見ていきましょう! コード <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.89 595.28" st
![テキストを手書き風にアニメーションさせる方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/53b0a87d2d6b9336a66acfd1d74062548a748d59/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTg2JUUzJTgyJUFEJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJTkyJUU2JTg5JThCJUU2JTlCJUI4JUUzJTgxJThEJUU5JUEyJUE4JUUzJTgxJUFCJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kYTAxMGQ3YjNmNTJmODIwOWJlMDQ5ZDczYzY3NjZkOQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhcnRfcG9yb2t5dSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJjMDJhNzA2M2FjNzY2NGY2NDIxZDRjYzExZGE5ZDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dbce80a1c9687cdf751becdf5a07f8700)