Draw & SVG Path - Complete Guide
Create professional "draw-in" animations with hand-following effects using the Timeline Draw Drawer and Inspector SVG Path panel. This guide covers the LUT-based hand draw system and SVG path animation settings.
Overview
The Draw & SVG Path system provides two key interfaces:
- Timeline Draw Drawer - Timeline-driven draw steps for hand animation scheduling
- Inspector SVG Path Panel - Per-object draw settings (mode, speed, stroke, filter)
These work together to create whiteboard-style animations where a hand draws paths that reveal vector objects.
Timeline Draw Drawer
Location
Open via the DRAW tab in the Timeline panel (next to CAMERA tab).
Draw Drawer Interface
┌──────────────────────────────────────────────────────────────────────────┐
│ [ CAMERA ] [ DRAW ] [ ↗ ] │
├──────────────────────────────────────────────────────────────────────────┤
│ Project default hand + tool │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ Playhead: 0:00.000 │
│ Active Step: — │
│ │
│ Preset: │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ LEFT · PHOTOREAL · MEDIUM · PEN + BLACK │ │
│ │ FOUNTAIN PEN │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ Scene: [ INHERIT (PROJECT) ] ✕ │
│ │
│ [ LAYER ORDER ▼ ] [ START @ ▶ ON ] │
│ │
│ [ AUTO-PLAN ] [ + STEP @ ▶ ] [ CLEAR ] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ DRAW STEPS 0 steps │
│ │
│ (Empty - use Auto-plan or + Step to create draw steps) │
│ │
└──────────────────────────────────────────────────────────────────────────┘
Header Controls
| Control | Description |
|---|---|
| Playhead | Current scene-local time (read-only) |
| Active Step | Step ID currently active at playhead (read-only) |
| Preset | Project default hand + tool selection |
| Scene | Scene-level override (or INHERIT from project) |
Preset Selection
Click the Preset button to open the Hand & Tool Selector modal:
- Choose hand style (Photoreal, Cartoon, Sketch)
- Choose handedness (Left/Right)
- Choose skin tone (Light, Medium, Dark)
- Choose tool type (Pen, Pencil, Marker, Brush)
- Use Calibrate… for fine-tuning nib offset
tip
Preset hierarchy: Step Override > Object > Scene > Project
Auto-Plan Strategies
| Strategy | Description |
|---|---|
| Layer Order | Draws objects in scene stacking order |
| Length | Starts with longer paths first |
| Round-robin | Interleaves drawing across objects (A1→B1→A2→B2…) |
When Round-robin is selected, a segment count input appears (2-16 segments).
Start @ ▶ Toggle
| State | Behavior |
|---|---|
| ON | Auto-plan starts from current playhead time |
| OFF | Auto-plan starts from time 0 of the scene |
Action Buttons
| Button | Action |
|---|---|
| AUTO-PLAN | Generate draw steps from drawable objects |
| + STEP @ ▶ | Add single step at current playhead |
| CLEAR | Remove all draw steps for current scene |
Draw Steps Table
Each step in the table shows:
DRAW STEPS TABLE
┌─────────────────────────────────────────────────────────────┐
│ Time │ Dur │ Target │ From │ To │ ⋯ │ ✕ │
├──────────┼────────┼──────────────┼────────┼──────┼─────┼───┤
│ 0:00 │ 1000ms │ Object 1 │ 0.0 │ 1.0 │ ⋯ │ ✕ │
│ 0:01 │ 800ms │ Object 2 │ 0.0 │ 1.0 │ ⋯ │ ✕ │
│ 0:01.8 │ 1200ms │ Object 3 │ 0.0 │ 1.0 │ ⋯ │ ✕ │
└─────────────────────────────────────────────────────────────┘
| Column | Description |
|---|---|
| Time | Start time (ms or m:ss.mmm) |
| Dur | Duration in milliseconds |
| Target | Target object to draw |
| From/To | Reveal progress range (0.0-1.0) |
| ⋯ | Opens step override controls |
| ✕ | Delete step |
Step Override (⋯)
Collapsed by default to avoid clutter:
- Step preset - Opens Hand & Tool Selector for this step only
- Clear overrides - Removes step-level overrides (inherits from scene/project)
Inspector SVG Path Panel
Location
Select an SVG Path object → Inspector Panel → SVG Path section
SVG Path Interface
┌──────────────────────────────────────────────────────────────┐
│ SVG Path [ - ]│
├──────────────────────────────────────────────────────────────┤
│ │
│ Mode [ Preview ▼ ] │
│ │
│ Speed [ Duration ▼ ] [ 1 ] │
│ (~1.0s) │
│ │
│ Stroke [ ████ ] Width [ 1 ] │
│ │
│ Filter Min [ 3 ] Max [ 400 ] │
│ │
│ [ ] Show hand following path │
│ │
└──────────────────────────────────────────────────────────────┘
Mode Options
| Mode | Description |
|---|---|
| Standard | Fill at end of animation |
| Preview | Fill per path (live preview) |
| Batched | Fill in batches |
Speed Settings
| Type | Description |
|---|---|
| Duration | Fixed duration in seconds |
| PPS | Pixels per second (auto-calculates duration) |
Stroke Settings
| Setting | Description |
|---|---|
| Color | Preview stroke color |
| Width | Stroke width (Width boost factor) |
Filter Settings
| Setting | Description | Default |
|---|---|---|
| Min | Minimum path length to include | 3px |
| Max | Maximum paths to keep | 400 |
Hand Following
Enable Show hand following path to display hand animation during draw-in.
note
Hand following requires objects to have animationType = "drawIn" and valid SVG path data in properties.paths[].d.
Hand Tool Calibration Modal
Fine-tune hand and pen alignment with the calibration modal.
Calibration Interface
┌──────────────────────────────────────────────────────────────────────────┐
│ Hand Follower Calibration [X] │
├──────────────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────┬──────────────────────────────────────────┐ │
│ │ │ │ │
│ │ PREVIEW CANVAS │ CALIBRATION CONTROLS │ │
│ │ │ │ │
│ │ ┌────────────────┐ │ Along Tangent (X) │ │
│ │ │ ✋ │ │ [──────────●──────────] -50px │ │
│ │ │ 🖊️ │ │ │ │
│ │ │ ╱ │ │ Left Normal (Y) │ │
│ │ │ ╱ │ │ [──────────●──────────] 0px │ │
│ │ └────────────────┘ │ │ │
│ │ │ Tool Rotation │ │
│ │ NIB ANCHOR POSITION │ [──────────●──────────] 15° │ │
│ │ X: [ 125 ] │ │ │
│ │ Y: [ 85 ] │ Tip Backtrack │ │
│ │ │ [──────────●──────────] 20px │ │
│ │ │ │ │
│ │ │ Rotation Mode │ │
│ │ │ [ none ] [ damped ] [ full ] │ │
│ │ │ │ │
│ │ │ [✓] Mirror Hand ● Nib Lock active │ │
│ │ │ │ │
│ └────────────────────────┴──────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────────────┤
│ [Reset] [Cancel] │
└──────────────────────────────────────────────────────────────────────────┘
Calibration Controls
| Control | Description | Range |
|---|---|---|
| Along Tangent (X) | Shifts hand along path direction | -500 to 500px |
| Left Normal (Y) | Shifts hand perpendicular to path | -500 to 500px |
| Tool Rotation | Rotates pen relative to hand | -360° to 360° |
| Tip Backtrack | How far behind the path head the tip sits | 0 to 500px |
| Nib Anchor X | Horizontal nib position on hand image | Pixels |
| Nib Anchor Y | Vertical nib position on hand image | Pixels |
Rotation Modes
| Mode | Description |
|---|---|
| none | Fixed orientation, no rotation |
| damped | Smooth rotation clamped to ±max degrees (5°-90°) |
| full | Full tangent-following rotation |
Additional Options
| Option | Description |
|---|---|
| Mirror Hand | Flip hand horizontally (left-handed look) |
| Nib Lock | Always active - keeps pen tip pinned to path |
Draw Step Properties
Each draw step contains:
DRAW STEP STRUCTURE
┌─────────────────────────────────────────────────────────────┐
│ id: "draw-scene1-0-abc123" │
│ time: 0 // scene-local time (ms) │
│ durationMs: 1000 // step duration │
│ targetObjectId: "obj-123" // object to draw │
│ from: 0 // reveal start (0-1) │
│ to: 1 // reveal end (0-1) │
│ │
│ overrides: { // optional step overrides │
│ presetId: "hand-left-dark" // hand preset │
│ toolId: "pen-black" // tool preset │
│ scale: 1.0 // hand scale │
│ mirror: false // mirror hand │
│ } │
└─────────────────────────────────────────────────────────────┘
Precompute (Performance)
For heavy scenes, precompute LUTs to improve playback:
Worker Status
- Worker busy count - Workers currently processing
- Queue size - Jobs waiting in queue
Precompute Options
| Option | Description |
|---|---|
| Prefetch Window | Lookahead window in seconds |
| Precompute Next | Build LUTs for upcoming steps |
| Precompute Scene | Build all LUTs for current scene |
| Cancel | Stop precompute processing |
SVG Draw Options Reference
SVG DRAW OPTIONS
┌─────────────────────────────────────────────────────────────┐
│ mode: 'standard' | 'preview' | 'batched' │
│ │
│ speed: { │
│ kind: 'duration' | 'pps' │
│ durationSec?: number // if kind='duration' │
│ pps?: number // if kind='pps' │
│ } │
│ │
│ previewStroke: { │
│ color: '#3b82f6' // stroke color │
│ widthBoost: 1 // width multiplier │
│ } │
│ │
│ fillStrategy: { │
│ kind: 'afterAll' | 'perPath' | 'batched' │
│ batchesN: 4 // for batched mode │
│ } │
│ │
│ filter: { │
│ minLen: 3 // min path length │
│ maxKeep: 400 // max paths to keep │
│ } │
│ │
└─────────────────────────────────────────────────────────────┘
Prerequisites
warning
Requirements for hand draw animation:
- Drawable objects must have SVG path data in
properties.paths[].d - Animation type should be
drawInfor hand-following overlay - Worker flags must be enabled:
perf.workerizedSamplingplugins.animator.handLut.worker.enabled
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Space | Play/Pause timeline |
| Escape | Close modal dialogs |
Best Practices
For Smooth Playback
- Use Precompute Scene before playing heavy animations
- Keep Filter Max reasonable (100-400 paths)
- Use Prefetch Window of 3-5 seconds
For Natural Hand Animation
- Select appropriate hand style (Photoreal for realistic, Cartoon for stylized)
- Use damped rotation mode with 30-45° max
- Fine-tune calibration offset for precise tip alignment
For Multiple Objects
- Use Auto-plan with appropriate strategy
- Layer Order for sequential reveal
- Round-robin for interleaved drawing effect
Troubleshooting
Hand Not Visible During Draw
- Enable Show hand following path in SVG Path panel
- Verify object has
animationType = "drawIn" - Check that worker flags are enabled
Draw Steps Not Generated
- Ensure objects have valid SVG path data
- Check that paths have sufficient length (above Filter Min)
- Use CLEAR then AUTO-PLAN to regenerate
Jerky Hand Animation
- Switch rotation mode from "full" to "damped"
- Reduce number of paths (increase Filter Min)
- Use Precompute before playback
Misaligned Pen Tip
- Open Hand Follower Calibration modal
- Adjust Along Tangent (X) and Left Normal (Y)
- Fine-tune Nib Anchor position
- Use Reset to restore defaults if needed
File Locations
| Component | Path |
|---|---|
| Draw Drawer | frontend/src/plugins/timeline-panel/drawers/DrawDrawer.tsx |
| SVG Draw Settings | frontend/src/components/shared/SvgDrawSettings.tsx |
| Hand Calibration Modal | frontend/src/components/dialogs/HandFollowerCalibrationModal.tsx |
| Hand-Draw Documentation | docs/hand-draw/README.md |