hand-line-draw

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.

About this skill

Purpose

Params