hand-line-draw

name	hand-line-draw
description	motion-graphic primitive — animated SVG stroke-on of a hand-drawn line that follows a specific path. distinct from squiggle-draw-on which is a free-form wobbly squiggle. used for motion-line trails behind a traveling object, arrow callouts pointing at a UI element, or directional underlines.

hand-line-draw

Purpose

Animate the drawing-on of a specific SVG path (motion trail, arrow callout, directional underline). The path is pre-defined; this primitive controls the stroke-on animation.

Distinct from squiggle-draw-on:

• squiggle-draw-on generates the path on-the-fly with jitter.
• hand-line-draw follows a pre-computed path (often the path traced by a traveling element).

Params

{
  "path_d": "M 60 300 Q 200 200 400 280 T 800 320",   // SVG path d-attr
  "stroke_color": "#0F0F0F",
  "stroke_width_px": 5,
  "stroke_linecap": "round",
  "stroke_linejoin": "round",

  "draw_duration_frames": 16,
  "draw_easing": "bezier(0.22, 1, 0.36, 1)",
  "draw_start_frame": 0,

  "arrow_tip": false,
  "arrow_tip_size_px": 18,

  "follows_element": null                 // optional: id of element this path follows
}

Behaviour

1. Render the SVG path with stroke-dasharray = pathLength; stroke-dashoffset = pathLength * (1 - progress).
2. Animate progress 0 → 1 over draw_duration_frames.
3. If arrow_tip = true, compute tangent at path end and render an arrowhead.
4. If follows_element is set, the path tracks the element's position keyframes (used for element-handoff trails).

Style pack overrides

• SP-G (riso-illustration) — motion-line behind traveling object.
• SP-B, SP-E — directional arrow callouts.

Quality Checks

• Path renders within canvas bounds.
• Stroke-on completes by draw_start_frame + draw_duration_frames.
• Arrow tip aligned with path tangent.

Failure Modes

• Line doesn't draw on. stroke-dasharray not set correctly. Use getTotalLength() to measure.
• Arrow tip floats off path. Compute tangent at the actual path-end coordinate, not a hardcoded angle.