LoginSignup
3
3

More than 1 year has passed since last update.

@Stchan(Stbay Chan)

手書き風ロゴアニメーション

Last updated at Posted at 2022-10-24

前提

SVG作成はinkscapeで作成する

参考サイト

※参考サイトはイラレを使っているのでinkscapeに置き換えて考える

inkscapeでsvgを作成する

ドキュメント設定

「ファイル」→「ドキュメントのプロパティ」

image.png

「ページ」を選択

image.png

表示単位「px」カスタムサイズで「単位」をpx 「幅」500　「高さ」200に設定する ビューボックスを「幅」500　「高さ」200に設定する

image.png

ベーステキスト作成

レイヤー名をベースに変更する

image.png

テキストツールを選択する

image.png

任意の文字を入力しフォントサイズを調整しなるべくページサイズ一杯にテキストを表示させる

image.png

ストロークをパスに変換

テキストを選択ツール選択

image.png

ストロークをパスに変換を選択する(イラレではアウトライン化)
image.png

パスの結合

※イラレでは複合パス
image.png

マスクパス作成

マスクレイヤー作成

マスクレイヤーを作成しテキストのレイヤーをロックする

image.png

ペンツールを選択
image.png

スナップを無効に
image.png

バーのフィル／ストロークを選択
image.png

ストローク単一色で設定する(ここでは赤)
image.png

ペンツールでテキストを塗りつぶすように描く
image.png

CSSアニメーションの設定

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3