How do I make a logo draw itself?

Give a path a dash pattern equal to its own length and an offset of the same amount, and the visible dash sits entirely off the end of the path, so nothing shows. Animate the offset to zero and the dash slides into view from the start point.

In SVG you do not need to measure the path to do this. Setting pathLength="1" tells the renderer to treat the path as one unit long, so the dash array and offset are both 1 and the animation is a plain 1 to 0.

<path d="…" pathLength="1"
      stroke-dasharray="1" stroke-dashoffset="1"/>

@keyframes draw { to { stroke-dashoffset: 0; } }

The order the contours are traced in is the order they exist in the file. A wordmark exported letter by letter draws letter by letter. The same wordmark flattened into one compound path draws everywhere at once, which looks like a wipe rather than a hand.

This is also why the animation has to read the real Bézier data. An outline reconstructed from a bitmap has no contours to take in order, and no anchor points to show while it draws.

The part that sells it is the handover. The stroke is the pen and it has to fade as the fill arrives, or the finished mark ends up carrying a permanent outline it never had in the artwork.

If the logo has a real keyline of its own, that is a different thing and it has to be drawn as a second path, because the first one is busy being the pen.

Staggering matters more than duration. Every contour starting at once reads as a transition; each one starting a beat after the last reads as writing. Forty milliseconds between letters is enough to feel like a hand without making a short clip feel slow.