Sketch arrows, circle the important bits, and write notes that animate stroke by stroke. All in your browser.
Stage1280 × 720 · 16:9
Select a tool to start drawing
00:00.000:10.0
Animation timeline
Your strokes will appear here. Draw on the canvas to build a sequence.
Ready · Drawings and exports stay on this device.
Draw once. Animate naturally.
Annotations are traced along their actual paths, not simply faded into place. Export your work as video, SVG, PNG or editable JSON.
Privacy by design.
No project upload or paid API required. Optional AI uses a model provided by your browser and may require an initial download.
Designed for creators.
Use a background image as a guide, adjust strokes on the timeline, and keep project files for later editing.
Draw a handwritten note
The note traces as a real series of vector strokes.
PUBLISH
Export your doodles
Choose the format for your workflow. Video is recorded in real time; available codecs depend on your browser.
OPTIONAL · ON-DEVICE AI
AI doodle planner
Describe a scene. The browser model proposes a few annotations with coordinates and timing. Review suggestions before adding them.
Requires a compatible browser with a built-in language model. No cloud API is used.
Review proposed layers
Quick guide
Pick Pen, Arrow, Circle, Box or Marker and drag on the stage. For a Note, click where you want the text. Select a layer to move it and change its timing, color and thickness.
Play to see strokes reveal over time. Drag the playhead to inspect a moment. Save a JSON project to continue editing later.
Keyboard: Ctrl/Cmd+S save, Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z redo, arrow keys to nudge the selected layer (Shift for 10 px), Delete to remove a selected layer, Space to play/pause when focus is not in a text field.
Processing
Preparing your animation…
Preparing
Draw and time annotations for a tutorial video
Draw pen strokes, arrows, circles, rectangles, underlines, and short notes on a 1280 × 720 canvas. Set layer order, timing, and easing by hand, or request an optional plan from the browser’s LanguageModel and review each editable layer before export.
Example workflow
Start on a blank canvas or choose a background, then draw or add annotation layers.
Set each layer’s order, start time, duration, and motion; edit any proposed AI layer manually.
Preview the 60-second canvas timeline and export a PNG, SVG, project JSON, or silent browser-recorded video.
Authored example: For a three-step tutorial, circle a button, draw an arrow toward the next menu, then add a short note that appears after the arrow.
Limits and privacy: The optional planner requires an available native browser LanguageModel and proposes editable layers rather than generating imagery or video. Canvas is 1280 × 720 and the timeline is capped at 60 seconds. Recorded video is silent; its green-key mode is an opaque green background, not alpha video.
Animated Doodle questions
Does the optional AI draw the finished illustration?
No. When the browser provides a LanguageModel, it proposes a limited set of editable annotation layers. Manual drawing, presets, editing, and export remain available without it.
Does green-key video include transparency or sound?
No. Green-key recording has an opaque green background, and recorded video is silent. Use the still PNG or SVG export for artwork.
