SVG Marching Ants

CODE

HTML

<div class="demo-stage sma-stage"><svg class="sma-svg" viewBox="0 0 240 140"><rect class="sma-rect" x="8" y="8" width="224" height="124" rx="14"/></svg><span class="sma-label">SELECTED</span></div>

CSS

.sma-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.sma-svg { width:280px; height:auto; }
.sma-rect { fill:rgba(233,27,137,.06); stroke:#E91B89; stroke-width:2.5; stroke-dasharray:12 8; animation:sma-march 1s linear infinite; }
@keyframes sma-march { to { stroke-dashoffset:-20; } }
.sma-label { position:absolute; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.25em; font-size:.85rem; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .sma-rect {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

破線の枠が回り続ける『選択中（marching ants）』インジケーターをSVG+CSSだけで作って。<rect>に stroke-dasharray:12 8（線12px・間隔8px）を設定し、@keyframesで stroke-dashoffset を 0 → -20（=dash+gapの合計）へ 1s linear infinite で動かすと破線が途切れず流れて見える。fillを薄いaccent色にすると選択範囲らしくなる。JS不要。画像切り取り枠・選択範囲・フォーカス表示に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

SVGマーチングアンツ（SVG Marching Ants）とは

破線の枠が回り続ける「選択中」インジケーター。stroke-dasharray + dashoffsetのループだけで実装。選択範囲・フォーカス・切り取り枠の表現に。この効果はSVG要素をCSS（必要に応じてJavaScript）でアニメーションさせ、拡大しても劣化しないベクター図形のパスや塗りを動かします。

使いどころ

ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

SVGマーチングアンツ（SVG Marching Ants）はどんな効果ですか？

破線の枠が回り続ける「選択中」インジケーター。stroke-dasharray + dashoffsetのループだけで実装。選択範囲・フォーカス・切り取り枠の表現に。ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く演出です。

SVG Marching AntsはCSSだけで実装できますか？

はい。CSSを中心に実装できます。本ページにコピーして使えるコードを掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

SVGマーチングアンツ（SVG Marching Ants）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ