whiteboard-animation

Whiteboard Animation

The VideoScribe / Doodly look: a hand draws illustrations and handwriting onto a board, stroke by stroke, while narration explains. Build it from animated SVG paths that draw themselves plus a marker hand that tracks the drawing tip, then sequence elements so the board fills up in narration order.

When to use

• A "scribe" / doodle explainer where a hand draws art and text onto a whiteboard.
• Animating a sketch or logo being drawn live, line by line.
• Handwriting that writes itself in, synced to a voiceover.
• Turning a static illustration into a guided, stroke-by-stroke reveal.

Core mechanic: SVG stroke draw-on

A path "draws itself" by animating stroke-dashoffset from its full length down to 0 — the dash gap shrinks, exposing the stroke from start to end.

const path = document.querySelector("#stroke");
const len  = path.getTotalLength();
path.style.strokeDasharray  = len;       // one dash as long as the whole path
path.style.strokeDashoffset = len;       // pushed fully out of view = invisible
path.getBoundingClientRect();            // force reflow before transitioning
path.style.transition       = "stroke-dashoffset 1.2s linear";
path.style.strokeDashoffset = "0";       // draws start → end

Use pathLength="1" on the <path> to normalize: then stroke-dasharray:1; stroke-dashoffset:1 draws any path regardless of real length, and a single eased value (0→1) is the draw progress. linear (or a very gentle ease) reads as a steady hand; avoid ease-in-out on long strokes — it makes the marker lurch.

The marker hand follows the tip

The illusion lives or dies on the hand sitting at the exact point being drawn. Sample the path at the current draw progress and place the hand image there each frame; the pen-nib of the hand asset must align to the path point (offset the image so its tip, not its corner, lands on the point).

const hand = document.querySelector("#hand");   // <img>/<g>, tip at its top-left "nib"
const NIB = { x: 6, y: 4 };                      // nib offset inside the hand art
function drawOn(path, hand, dur = 1200) {
  const len = path.getTotalLength(), t0 = performance.now();
  path.style.strokeDasharray = len;
  (function frame(now) {
    const k = Math.min(1, (now - t0) / dur);     // 0→1 progress
    path.style.strokeDashoffset = len * (1 - k); // expose start→tip
    const p = path.getPointAtLength(len * k);    // current tip in SVG coords
    hand.setAttribute("transform", `translate(${p.x - NIB.x} ${p.y - NIB.y})`);
    if (k < 1) requestAnimationFrame(frame);
  })(t0);
}