yachin29 https://blog.hatena.ne.jp/yachin29/ WEBサイト制作の勉強 https://yachin29.hatenablog.com/ Illustrator 1.IllustratorでSVG画像を作成 See the Pen svgで手書き風アニメーション by yachin29 (@yachin29) on CodePen. まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtextにしましょう。文字を書いたらアウトラインにし、レイヤーをロックしましょう。 次に、新しいレイヤー（mask）を作り、そこに下のレイヤーの文字が隠れるように線を描きます。 この時にアニメーションで動かしたい順番に線を引くようにしましょう。文字を綺麗に隠せたらSVGで保存します。… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fyachin29.hatenablog.com%2Fentry%2F2023%2F09%2F07%2F084426" title="svgとcssで手書き風のアニメーションを作成 - WEBサイト制作の勉強" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/y/yachin29/20230129/20230129142029.png Hatena Blog https://hatena.blog 2023-09-07 08:44:26 rich https://yachin29.hatenablog.com/entry/2023/09/07/084426 1.0 100%