106.9K+Download
Skip to the usage guide
Whiteboard Animationby iart-ai

Whiteboard Animation Skill.

Create SVG draw-on explainers with a marker hand that follows each stroke.

  • Whiteboard
  • Explainer
Download OpenDesignView Usage Guide
Source Review · whiteboard-animationSKILL.md
Task Create SVG draw-on explainers with a marker hand that follows each stroke. Produces A standalone HTML draw-on scene or a requested video composition. Before You Start Bring the drawing order, line artwork and a marker-hand asset with an identifiable nib. Include narration timing if the drawing must follow speech, and choose HTML preview or video delivery explicitly.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Create SVG draw-on explainers with a marker hand that follows each stroke

Build whiteboard scenes with ordered strokes, calibrated pen-tip motion, narration timing and exact-time visual checks.

Source-based workflowNot an execution benchmark

The Working Approach

whiteboard-animation builds the illusion of a hand drawing a diagram or caption. SVG strokes reveal in order while a marker image follows the current drawing tip. The hand position and exposed path share the same progress value, so they can be inspected together at an exact moment.

The source distinguishes a short browser scene from a narrated video export. A standalone scene uses one HTML file and a seekable timeline; a full film moves the same mechanics into a frame-driven composition. Stroke order, pen lifts and the timing of narration are part of the design.

Expected Deliverables

  • A standalone HTML draw-on scene or a requested video composition.
  • Ordered SVG strokes and a calibrated marker-hand asset.
  • Frozen-frame evidence showing the hand during a stroke and the finished board.
See the Example Brief

From Brief to Review

  1. 01
    Prepare drawable artwork

    Convert the illustration into open strokes in a plausible drawing order. Give filled regions an outline that can reveal before their color.

  2. 02
    Bind the nib to the stroke

    Measure the hand asset's nib offset and drive its position from the same progress as the stroke reveal. Lift the hand between separate paths.

  3. 03
    Sequence and inspect

    Align each drawing with its narration beat, then freeze the middle of a stroke. Check tip alignment, final completion, layout and transitions between board sections.

02 When to Use It

When to Use It

Bring the drawing order, line artwork and a marker-hand asset with an identifiable nib. Include narration timing if the drawing must follow speech, and choose HTML preview or video delivery explicitly.

A Good Fit

  • A diagram should unfold as explainedSequential drawing can focus attention on the current relationship instead of showing the entire board at once.
  • Handwriting is part of the effectThe source covers glyph paths and reveals that follow reading order.

Limits to Check

  • Filled art is not automatically drawableA solid compound shape needs preparation before a believable single-stroke reveal.
  • Narrated export adds a pipelineThe one-file web example does not by itself produce an MP4 with voiceover.

Bring These Inputs

  • Ordered contentSupply the illustrations, labels and intended drawing sequence.
  • Hand assetProvide a marker-hand image or approve one with a measurable nib point.
  • Narration and targetInclude the voiceover or timed script, frame size and required output format.

03 Decisions That Matter

Decisions That Matter

  1. A convincing drawing tip

    Shared progress prevents the hand drifting ahead of the visible line.

  2. Purposeful stroke order

    Pen lifts and sequential elements keep the action physically legible.

  3. Inspectable intermediates

    A mid-stroke still can expose faults that disappear during normal-speed playback.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Supply the illustrations, labels and intended drawing sequence.

Upstream Source File
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use whiteboard-animation to explain a three-step signup process from my supplied line drawings and narration. Reveal one step at a time in spoken order, using the same marker hand throughout. Prepare open paths and calibrate the nib so it stays on the leading edge. Keep fills hidden until their outlines finish, and lift the hand between separate drawings. Deliver a standalone HTML preview with exact-time seeking and a completed-board reduced-motion state. Inspect the start, a mid-stroke moment for each step and the final board before proposing a narrated video export.

Inspect the Result

Check the actual output against these observable criteria.

  • Freeze mid-stroke and verify the nib sits on the drawn tip.
  • Check pen lifts, path order and fill-after-outline behavior.
  • Verify complete final strokes and a readable static reduced-motion board.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
iart-ai
Repository
iart-ai/explainer-video-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 3e2d411b725d
Editorial Source Summary
Create SVG draw-on explainers with a marker hand that follows each stroke.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I animate a filled SVG directly?

The source requires drawable strokes or prepared outlines. A filled silhouette alone does not provide the path a marker would follow.

How does the hand stay aligned?

The documented mechanism samples the path at the same progress used by stroke-dashoffset and subtracts the measured nib offset from the hand position.

Does it include narration?

It can plan drawing against narration. A baked narrated video requires the frame-driven video route rather than only the standalone HTML preview.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md