thisdesign.space

SVG · 1800 ms

Plotter draw-on

SVG paths drawing themselves in, one stroke at a time, timed by length.

Set each path's stroke-dasharray to its own length, then animate stroke-dashoffset from that length down to zero — the path appears to be drawn by a physical pen. Critically, time each path proportional to its length so short marks plot fast and long perimeters plot slow. That's what makes it read as a plotter, not a transition.

byudaysinhudaysinh

Demo

Live demo

The demo runs the same SVG code shown below — replay to retrigger.

Code

Drive every path's length from JS, then let CSS animate it.js

for (const path of document.querySelectorAll("svg [data-plot]")) {
  const L = path.getTotalLength();
  const duration = Math.max(0.4, L / 600); // 600 px/s
  path.style.strokeDasharray = String(L);
  path.style.strokeDashoffset = String(L);
  path.style.animation = `plot ${duration}s linear forwards`;
}

Keyframe + base path styling.css

@keyframes plot { to { stroke-dashoffset: 0; } }
[data-plot] {
  fill: none;
  stroke: #1E2A3A;
  stroke-width: 1.2;
  stroke-linecap: round;
}

See it in use