DEMO
CODE
<div class="demo-stage"><svg class="sd-svg" width="190" height="190" viewBox="0 0 190 190"><circle cx="95" cy="95" r="72"></circle><path d="M58 98 L84 124 L134 68"></path></svg></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.sd-svg circle, .sd-svg path { fill:none; stroke:#E91B89; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:520; stroke-dashoffset:520; animation:sd-draw 3.4s ease infinite; }
.sd-svg path { stroke:#1A1A1A; animation-delay:.5s; }
@keyframes sd-draw { 0% { stroke-dashoffset:520; } 65%,100% { stroke-dashoffset:0; } }
AI PROMPT
SVGの線が描かれる効果を作って。circleとpathにfill:none+stroke、stroke-dasharrayをパス長以上の値（例520）、stroke-dashoffsetも同値で初期は非表示。keyframeでoffsetを0にすると線が引かれていく。stroke-linecap:roundで端を丸く、pathにanimation-delayを付けて順に描く。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
SVGの線が手で描かれるように現れる効果。アイコン・ロゴ・チェックマークの登場演出に。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。