Stroke draw

스트로크 드로우

A vector animation where a line appears to be drawn in real time rather than fading into place — common for logos, signatures, and map routes.

Also known as: 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}

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 paths expose stroke-dasharray and stroke-dashoffset. Set the dash length to the path's full length so it becomes one long dash, offset it by that same length to hide it completely, then animate the offset down to zero — the line appears to draw itself like a pen stroke.

In After Effects, the Trim Paths effect on a shape layer does the same job: keyframing its Start, End, and Offset values draws or erases a line. Logo intros, handwritten signatures, and map-route animations almost all boil down to this one trick.

You need the path's exact length (via getTotalLength()) for the offset math to line up. Guess it wrong and the line either stops short or leaves a tail hanging at the end.

When to use

Draw it too slowly and it drags. Keep a short logomark to 0.6–1s; only give a complex map route more time than that.