Skip to main content
Version: Current

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:

  1. Timeline Draw Drawer - Timeline-driven draw steps for hand animation scheduling
  2. 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.

Current visual orientation​

The DRAW drawer edits scene-local draw steps against the same real timeline used by preview and export. It does not animate a separate documentation canvas.

Scribe Animator Desktop with the timeline Draw drawer open
Presentation defaults and the scene-local draw-step plan are related, but they are edited independently.
Screenshot callouts
  1. DRAW tab
    Opens draw-step authoring beside the shared scene timeline.
  2. Status and defaults
    Shows scene-local playhead time, the sampled active step, and inherited project or scene hand/tool settings.
  3. Planning controls
    Choose a strategy, auto-plan, add a step at the playhead, clear editable steps, or precompute.
  4. Shared ruler and playhead
    Start-at-playhead and manual-step commands use this real current time.
  5. Audio timing reference
    Audio-bound objects can preserve or regenerate steps inside their script segment.
Product UI and source verification

This capture and the marked controls were checked against the running Desktop editor with browser-based UI review on July 26, 2026. Auto-plan output still depends on eligible drawable geometry, scene timing, locks, and audio bindings. For the complete object-eligibility, planning, hand/tool, calibration, camera, precompute, troubleshooting, and limitation workflow, follow Draw paths with hands and tools.

Timeline Draw Drawer​

Location​

Open via the DRAW tab in the Timeline panel (next to CAMERA tab).

Draw Drawer Interface​

The authentic drawer is shown in the annotated screenshot above. Read it from top to bottom:

  1. Confirm the scene-local Playhead and sampled Active Step.
  2. Review the inherited project hand and tool preset.
  3. Add a scene override only when this scene needs a different presentation.
  4. Choose a planning strategy and decide whether planning starts at the current playhead.
  5. Use AUTO-PLAN for eligible geometry or + STEP @ ▶ for a manual step.
  6. Inspect the generated rows before previewing or precomputing.

An empty DRAW STEPS area means no editable steps exist for the active scene. It does not prove that the selected object is eligible; check its SVG paths, animation type, locks, timing, and audio binding before retrying.

Setting an eligible object to Draw In does not automatically populate DRAW STEPS; use AUTO-PLAN or + STEP @ ▶ to author them. See How timing sources combine when preset animation, Draw timing, and keyframes coexist, and Audio binding before replanning an audio-bound object.

For an outcome-focused example that keeps one SVG target while splitting it into four partial ranges with different step hands, tools, and materials, follow How to animate one drawing in multiple steps. This reference explains the fields; the tutorial provides the tested route boundaries, live switching evidence, Round-robin comparison, and verified MP4.

Header Controls​

ControlDescription
PlayheadCurrent scene-local time (read-only)
Active StepStep ID currently active at playhead (read-only)
PresetProject default hand + tool selection
SceneScene-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​

StrategyDescription
Layer OrderDraws objects in scene stacking order
LengthStarts with longer paths first
Round-robinInterleaves drawing across objects (A1→B1→A2→B2…)

When Round-robin is selected, a segment count input appears (2-16 segments).

Start @ ▶ Toggle​

StateBehavior
ONAuto-plan starts from current playhead time
OFFAuto-plan starts from time 0 of the scene

Action Buttons​

ButtonAction
AUTO-PLANGenerate draw steps from drawable objects
+ STEP @ ▶Add single step at current playhead
CLEARRemove all draw steps for current scene

Draw Steps Table​

Each step in the table shows:

Example timeExample durationExample targetReveal rangeAvailable actions
0:001000 msObject 10.0 to 1.0Override, Camera, delete
0:01800 msObject 20.0 to 1.0Override, Camera, delete
0:01.81200 msObject 30.0 to 1.0Override, Camera, delete
ColumnDescription
TimeStart time (ms or m:ss.mmm)
DurDuration in milliseconds
TargetTarget object to draw
From/ToReveal progress range (0.0-1.0)
⋯Expands step override and Draw-step Camera 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)

Draw-step Camera​

Draw-step Camera generates framing for one drawing step. It is not the same as Follow Hand, and it is not edited as a general object camera.

  1. Switch CAMERA → Camera Mode to Track.
  2. Open DRAW and expand the owning step with ⋯.
  3. In the step's Camera area, choose Tight, Medium, or Wide.
  4. Set the start offset and move duration.
  5. Choose Continue, or choose Revert and set a hold.
  6. Resolve any blocking Object Camera overlap.
  7. Choose Add Camera, then inspect the generated D rows in CAMERA.
Real Scribe Animator DRAW drawer with a Draw-step Camera enabled on an expanded step
The editable camera recipe belongs to the expanded Draw step. The selected drawable's Properties panel only reports a read-only summary.
Screenshot callouts
  1. DRAW drawer
    Draw-step Camera is authored from the owning step in DRAW.
  2. Step Camera
    Framing and timing are scoped to this drawing step.
  3. Enabled recipe
    The saved step recipe has generated Track keys.
  4. Update or remove
    Change generated camera behavior from its source step.

AUTO-PLAN creates Draw steps but does not enable their cameras. Step camera timing is constrained by the step, the next configured camera action, and the scene end. If Add Camera or Update Camera is disabled, confirm Track mode, shorten the move/hold, or separate the action from an overlapping Object Camera range.

Properties shows Draw-step Camera as read-only for drawable objects so ownership stays unambiguous. See How the camera systems interact for the Object Camera comparison, M/O/D precedence, and conflict recovery.

Inspector SVG Path Panel​

Location​

Select an SVG Path object → Inspector Panel → SVG Path section

SVG Path Interface​

The expanded SVG Path section groups controls in this order: draw mode, speed model and value, preview-stroke color and width boost, minimum-path and maximum-path filters, then the hand-following toggle. The tables below describe each control without approximating the inspector's layout.

Mode Options​

ModeDescription
StandardFill at end of animation
PreviewFill per path (live preview)
BatchedFill in batches

Speed Settings​

TypeDescription
DurationFixed duration in seconds
PPSPixels per second (auto-calculates duration)

Stroke Settings​

SettingDescription
ColorPreview stroke color
WidthStroke width (Width boost factor)

Filter Settings​

SettingDescriptionDefault
MinMinimum path length to include3px
MaxMaximum paths to keep400

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​

Use the preview canvas to judge where the tool tip meets the path while changing the controls:

  1. Adjust Along Tangent and Left Normal until the nib reaches the path head.
  2. Set the nib anchor to the tool tip in the hand image.
  3. Tune Tool Rotation and Tip Backtrack.
  4. Choose none, damped, or full rotation.
  5. Enable Mirror Hand only for the intended handedness; Nib Lock remains active to pin the tip to the path.
  6. Use Reset to restore defaults or Cancel to leave without applying the current adjustment.

Calibration Controls​

ControlDescriptionRange
Along Tangent (X)Shifts hand along path direction-500 to 500px
Left Normal (Y)Shifts hand perpendicular to path-500 to 500px
Tool RotationRotates pen relative to hand-360° to 360°
Tip BacktrackHow far behind the path head the tip sits0 to 500px
Nib Anchor XHorizontal nib position on hand imagePixels
Nib Anchor YVertical nib position on hand imagePixels

Rotation Modes​

ModeDescription
noneFixed orientation, no rotation
dampedSmooth rotation clamped to ±max degrees (5°-90°)
fullFull tangent-following rotation

Additional Options​

OptionDescription
Mirror HandFlip hand horizontally (left-handed look)
Nib LockAlways active - keeps pen tip pinned to path

Draw Step Properties​

Each draw step contains:

FieldExampleMeaning
iddraw-scene1-0-abc123Unique step identifier
time0Scene-local start time in milliseconds
durationMs1000Step duration
targetObjectIdobj-123Object whose geometry is revealed
from0Reveal start in the 0 to 1 range
to1Reveal end in the 0 to 1 range
overrides.presetIdhand-left-darkOptional step-level hand preset
overrides.toolIdpen-blackOptional step-level tool preset
overrides.scale1.0Optional hand scale
overrides.mirrorfalseOptional mirrored-hand state

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​

OptionDescription
Prefetch WindowLookahead window in seconds
Precompute NextBuild LUTs for upcoming steps
Precompute SceneBuild all LUTs for current scene
CancelStop precompute processing

SVG Draw Options Reference​

OptionAccepted value or examplePurpose
modestandard, preview, or batchedSelect the overall draw and fill behavior
speed.kindduration or ppsChoose fixed duration or pixels-per-second timing
speed.durationSecNumber, when kind is durationSet fixed draw duration in seconds
speed.ppsNumber, when kind is ppsDerive duration from path length
previewStroke.color#3b82f6Set the preview stroke color
previewStroke.widthBoost1Multiply the preview stroke width
fillStrategy.kindafterAll, perPath, or batchedDecide when fills appear
fillStrategy.batchesN4Set the number of fill batches in batched mode
filter.minLen3Ignore paths shorter than this pixel length
filter.maxKeep400Cap the number of retained paths

Prerequisites​

warning

Requirements for hand draw animation:

  1. Drawable objects must have SVG path data in properties.paths[].d
  2. Animation type should be drawIn for hand-following overlay
  3. Worker flags must be enabled:
    • perf.workerizedSampling
    • plugins.animator.handLut.worker.enabled

Keyboard Shortcuts​

ShortcutAction
SpacePlay/Pause timeline
EscapeClose modal dialogs

Best Practices​

For Smooth Playback​

  1. Use Precompute Scene before playing heavy animations
  2. Keep Filter Max reasonable (100-400 paths)
  3. Use Prefetch Window of 3-5 seconds

For Natural Hand Animation​

  1. Select appropriate hand style (Photoreal for realistic, Cartoon for stylized)
  2. Use damped rotation mode with 30-45° max
  3. Fine-tune calibration offset for precise tip alignment

For Multiple Objects​

  1. Use Auto-plan with appropriate strategy
  2. Layer Order for sequential reveal
  3. Round-robin for interleaved drawing effect

Troubleshooting​

Hand Not Visible During Draw​

  1. Enable Show hand following path in SVG Path panel
  2. Verify object has animationType = "drawIn"
  3. Check that worker flags are enabled

Draw Steps Not Generated​

  1. Ensure objects have valid SVG path data
  2. Check that paths have sufficient length (above Filter Min)
  3. Use CLEAR then AUTO-PLAN to regenerate

Jerky Hand Animation​

  1. Switch rotation mode from "full" to "damped"
  2. Reduce number of paths (increase Filter Min)
  3. Use Precompute before playback

Misaligned Pen Tip​

  1. Open Hand Follower Calibration modal
  2. Adjust Along Tangent (X) and Left Normal (Y)
  3. Fine-tune Nib Anchor position
  4. Use Reset to restore defaults if needed