ShowMotion

SVG & Shape

Line Drawing (ラインドローイング)

別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw

破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。

使いどころ

アイコン、ロゴ、イラスト

バリエーション

  • draw in
  • draw out
  • scroll-linked draw
  • partial segment travel
  • checkmark
  • underline
  • signature

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にラインドローイング(Line Drawing)アニメーションを追加してください。パスドローイング(path drawing)、セルフドローイングSVG(self-drawing SVG)とも呼ばれます。
各線がパスに沿って始点から終点まで滑らかに自分で描かれていくように見せ、チェックマークのような2本目の線は1本目のすぐ後に続けてください。
ループさせず画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は描き終わった線を表示してください。

似ているモーション

Stroke Text Draw (ストロークテキストドロー)

別名 Draw In Text, Animated Stroke Text

文字の輪郭が線として描かれてから、塗りが現れます。

使いどころ

ロゴ、ヒーローエリアの単語

Checkbox Check Draw (チェックボックスチェックドロー)

別名 Animated checkbox, Checkmark draw

チェックを入れると、ボックスの中にチェックマークが一筆ずつ描かれます。

使いどころ

フォーム、ToDo リスト

Success Checkmark (サクセスチェックマーク)

別名 Animated success tick

円とチェックマークが描かれ、操作が成功したことを伝えます。

使いどころ

フォーム送信、決済完了

Underline Draw (アンダーラインドロー)

別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left

ホバーすると、リンクの下に片側または中央から下線が伸びます。

使いどころ

ナビゲーションリンク、インラインリンク

Motion Path (モーションパス)

別名 Animate Along Path, Offset Path Animation

要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。

使いどころ

ルート上を進む飛行機や点、装飾的な移動要素

Orbiting Circles (オービティングサークル)

別名 Orbit Animation, Orbit, Orbiting icons

小さな円やアイコンが円軌道を描いて中心の周りを回ります。

使いどころ

連携サービスの図

Shape Morph (シェイプモーフ)

別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening

あるベクター図形が別の図形へ滑らかに変形します。

使いどころ

アイコンの状態切り替え、ヒーローグラフィック

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。