디자인 아틀라스
EN
▶ 모션 그래픽

스트로크 드로우

Stroke draw

선이 처음부터 그려진 게 아니라 실시간으로 그어지는 것처럼 보이는 SVG/벡터 애니메이션. 로고·서명·지도 경로 연출에 흔합니다.

다른 이름: Write-on effectLine draw animation선 그리기 효과
···
html
<svg class="draw" viewBox="0 0 200 100">
  <path id="p" d="M20,70 C40,20 60,90 85,45 C100,18 115,55 130,45 C145,35 150,70 180,30" />
</svg>
css
.draw{width:min(84%,340px);aspect-ratio:2/1}
#p{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
js
const p = document.getElementById('p');
const len = p.getTotalLength();
p.style.strokeDasharray = String(len);
p.style.strokeDashoffset = String(len);
const dur = 2600, hold = 900;
const start = performance.now();
function loop(now) {
  const t = (now - start) % (dur + hold);
  const progress = Math.min(1, t / dur);
  const eased = 1 - Math.pow(1 - progress, 2);
  p.style.strokeDashoffset = String(len * (1 - eased));
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

SVG path에는 stroke-dasharray와 stroke-dashoffset이라는 속성이 있다. 대시 간격을 path 전체 길이만큼 크게 주고(stroke-dasharray: 길이), 처음엔 그만큼 오프셋을 줘서(stroke-dashoffset: 길이) 선을 완전히 숨긴 뒤, 오프셋을 0으로 애니메이션하면 마치 펜으로 그리듯 선이 나타난다.

After Effects에서는 Shape 레이어의 Trim Paths 이펙트가 같은 역할을 한다. Start·End·Offset 세 값을 키프레임으로 움직여 선이 그려지거나 지워지는 걸 만든다 — 로고 인트로, 손글씨 서명, 지도 위 경로 애니메이션 대부분이 이 원리다.

path의 실제 길이(getTotalLength())를 정확히 알아야 오프셋 값이 맞는다. 길이를 대충 추정하면 선이 다 그려지기 전에 멈추거나 끝에서 남는 부분이 생긴다.

언제 쓰나

너무 느리게 그리면 지루해집니다. 짧은 로고 마크는 0.6~1초, 복잡한 지도 경로만 그보다 길게 잡으세요.