WORK 06 / SVG MOTION LAB

SVG Motion Lab

SVGを貼るだけ。12種類のCSSモーションを同じアイコンで比べて、そのまま実装コードをコピーできます。

SELECTED MOTION

Lift

少し上へ移動して拡大

Hover
✓ reduced-motion対応✓ SVG本体は変更なし✓ Hover / Focus対応

MOTION GALLERY

同じSVGで違いを確認し、気に入った動きを選べます。

モーションを選択
細かく調整する再生時間・遅延・easingなど（任意）

IMPLEMENTATION

実装コード

コードを見る

HTML

<button class="svg-motion-control" type="button" aria-label="アイコンを操作する">
<span class="svg-motion" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</button>

このツールの制約

SVG内部要素単位のアニメーション、pathモーフィング、stroke描画、SVG最適化、ファイルアップロードには対応しません。外部リソースを含むSVGは拒否します。検証は安全性をあらゆる環境で保証するものではありません。