Whiteboard Animation
Sign in

Animate a diagram being drawn, step by step

By Published

TL;DR To animate a diagram so it looks drawn on a whiteboard, something has to know its lines and the order to draw them in. In PowerPoint you give each part a Wipe entrance and chain them with After Previous (a wipe, not strokes), or draw the diagram in ink and apply the Replay animation. On a web page, SVG `stroke-dashoffset` draws each path in the order you time it: we ran a flow chart and a map route that way in Chrome. In After Effects, Trim Paths does the same for vector paths, and Adobe’s own tutorial uses it to draw a route on a map. Here you upload the finished diagram as a picture and a hand draws every outline, then the colour, in 1 min 4 s for our water-cycle diagram; you choose lines then colour, whose colour goes first and how long each pass takes, but not the order of individual boxes inside the line art.

Upload a pictureBrowse examples

Ways to draw a diagram on screen

The same goal, a diagram that appears line by line, done five ways. The SVG and WhiteboardAnimation.ai rows come from our own runs; PowerPoint and After Effects from Microsoft’s and Adobe’s help pages, read 1 November 2026.

What each method starts from, whether it follows real strokes and who decides the order. Sources at the end of the page.
MethodYou start fromFollows the lines?Order of stepsHandOutput
PowerPoint: Wipe entranceShapes, arrows and text on a slideNo: each object is wiped in from one sideYours: one effect per object, After Previous, reorder in the Animation PaneNoSlide show, or an MP4 via Create a Video (up to 4K on Windows)
PowerPoint: Ink ReplayInk you draw with a pen or fingerYes: your strokes, in the order you drew themThe order you drew inNoReplay animation in a slide show; Microsoft 365 subscribers only
SVG stroke-dashoffsetVector paths in an SVG fileYes: each path draws from its start to its endYours: a start time per pathNo, unless you animate oneAn animation on a web page
After Effects: Trim PathsVector artwork, one path per lineYes, the paths you have or traceYours: keyframes per pathOnly if you animate oneA render of your composition; Creative Cloud subscription
WhiteboardAnimation.aiA finished picture: PNG, JPEG or WebPYes: every outline, then the colourLine art then colour; subject or background first; not box by boxSix hands, or noneMP4 or WebM; 5 free credits on sign-up, watermarked until you buy

A finished diagram, drawn by a hand

Upload the diagram as one picture and a hand draws it: all the outlines first, then the colour. These are drawings the product made of our own example diagrams, with the default settings.

WhiteboardAnimation.ai (default settings)
WhiteboardAnimation.ai: four frames of the water-cycle diagram. Black outlines of the cloud, mountain and river; the outlines complete with the sea; blue and yellow colour going into the cloud, arrows and sun; the finished diagram on its own paper.

The water-cycle diagram at a quarter, half, three quarters and the end: the arrows are outlined before any colour goes in, so the cycle reads early.

Marketing funnel animation: the picture as it was uploaded
The picture
A sales diagram: the marketing funnelDefault settings, subject first. The line art takes 19 seconds; the whole drawing 51 seconds.Use this pictureMarketing funnel animation: script, prompt and chapters
Photosynthesis animation: the picture as it was uploaded
The picture
A labelled process: photosynthesisArrows, molecules and a plant: the line art takes 44 seconds of 1 min 35 s, so there is time to talk through each arrow before the colour.Use this picturePhotosynthesis animation: script, prompt and chapters
How long the line art and the whole drawing take with the default settings; strokes counted in the published water-cycle drawing plan (22 October 2026).
ExampleLine strokesColour strokesAs drawnLine art
The water cycle3665711:030:21
Marketing funnel0:510:18
Photosynthesis1:350:43
Employee onboarding0:450:13

What you control, all without redrawing or spending a credit (Drawing order):

  • Lines, then colour. All the line art plays before the colour. Choose Lines only to stop at the outlines, for a whiteboard-marker look.
  • Whose colour first. Subject first colours the figures before the background; Background first the other way round.
  • How long each pass takes. On the timeline, drag a clip shorter or longer, or move a layer’s colour next to its lines, and set the total length to your narration.
  • Not box by box. Each of our example drawings is two layers, the subject and the background, each with a line clip and a colour clip. On the four diagrams above nearly all the outlines are in the subject layer, so you cannot tell it to draw step 1, then step 2, then step 3. For that, see the next section.

Drawing an infographic step by step

“Step by step” means two different things: the drawing builds up while you talk, or each step appears on its own beat.

  • The drawing builds while you talk

    Upload the whole infographic here and set the length to your narration. The outlines go down first, so the structure is readable before the colour. One credit per picture.

  • One step per beat, from one picture

    Export one picture per step from your design tool (step 1, then a copy with step 2 added, and so on) and draw each one. Each is its own drawing and costs a credit; place them one after another in your editor. Each picture is drawn in full, so step 1 is drawn again under step 2.

  • One step per beat, in a slide

    Build the steps as separate shapes in PowerPoint and give each a Wipe entrance, After Previous. Exact control of order, but each part is wiped on, not drawn.

  • One step per beat, in code

    Draw the infographic as SVG paths and give each step its own start time with stroke-dashoffset. Exact control, real strokes, but only for vector art you have.

The task page Animated infographic maker shows three infographics drawn here and the settings that suit them.

PowerPoint: Wipe or Ink Replay

PowerPoint has no effect that traces the lines of a shape. Microsoft’s help describes two ways to get close. We have not run them for this guide.

  1. 01

    Wipe each part on, in order

    Select one shape, arrow or text box, open Animations and choose Wipe (an entrance effect: the object is wiped into place from a direction you pick in Effect Options).

  2. 02

    Chain the parts

    Set Start to After Previous so each part follows the last without a click, and set Duration and Delay. Drag the effects into order in the Animation Pane.

  3. 03

    Or replay ink

    Draw the diagram on the Draw tab with a pen or your finger, select the ink with Lasso Select, then choose Replay on the Animations tab: the ink starts hidden and redraws in the order it was drawn. It lasts two seconds by default; change Duration. Microsoft 365 subscribers only.

  4. 04

    Export a video

    File > Export > Create a Video, MP4 or WMV, up to Full HD 1080p (Ultra HD 4K on Windows 10 or later). Without recorded timings each slide gets 5 seconds by default.

Wipe works on any diagram you build from shapes, but wipes it on rather than drawing it; Ink Replay draws real strokes, but only the ink you drew yourself.

SVG: stroke-dashoffset, run in Chrome

For a diagram on a web page, the line-drawing trick is two stroke properties. We wrote a small SVG flow chart and ran it.

SVG stroke-dashoffset in Chrome 156 (our own file; 4 s timeline; 1 November 2026)
Four frames of an SVG flow chart: the Lead box and an arrow; Lead, arrow and Demo; a second arrow and the Deal box with its label fading in; all three boxes joined by arrows with a red underline under Deal.

Each box and arrow is a path with its own start time, so the chart draws Lead, arrow, Demo, arrow, Deal, then a red underline. The labels are filled text, not strokes, so we faded them in after their box.

  1. 01

    Draw the diagram as paths

    Each line you want drawn is its own <path> (or line, circle, rect) with a stroke and fill="none".

  2. 02

    Make the dash as long as the path

    Set pathLength="1" on the path, then stroke-dasharray: 1: one dash the length of the whole path. Without pathLength, read the length with getTotalLength() and use that number.

  3. 03

    Offset the dash, then bring it back

    Start at stroke-dashoffset: 1 (the dash pushed off the path, nothing visible) and animate it to 0 with a CSS animation. The line appears from the path’s start to its end.

  4. 04

    Order the steps with delays

    Give each path its own animation-delay and animation-duration. The order is entirely yours, and so is the work of turning a picture into paths.

MDN describes stroke-dasharray as the pattern of dashes and gaps used to paint the outline, and stroke-dashoffset as an offset on that pattern; both work across current browsers. A photo or a flat PNG has no paths, so to use this on an existing diagram you first redraw it as vectors.

Animating a map being drawn

A history or travel map usually wants two things: the map drawn, then a route traced across it.

SVG stroke-dashoffset in Chrome 156 (our own map file; 4 s timeline; 1 November 2026)
Four frames of an SVG map: the coastline; the coastline and a blue river; a red route leaving Avila; the route through Toledo to Cordoba with all three towns labelled.

The coast first, then the river, then the route, each town appearing as the route reaches it. A route is the easy case for stroke-dashoffset: one path, drawn from its start.

  • After Effects: Adobe’s tutorial *Animate a map* imports an Illustrator map as Composition – Retain Layer Sizes, turns the route layer into shapes, adds Trim Paths with End keyframed from 0% to 100%, and drives a taxi along the same path with Auto-Orient > Orient Along Path. Not run for this guide.
  • SVG: as above, with the route as one path. Our run is the strip above.
  • Here: we have no map among our examples and have not drawn one for this guide, so we cannot show you one. A map illustration is a picture like any other, so it would be drawn the same way: every outline, then the colour. The route would be drawn with the rest of the line art, not on its own afterwards.

For a hand-drawn base map with a route traced on top, draw the map here and trace the route in After Effects or SVG over it. On Pro, a transparent export puts the drawing over other footage (Transparent export).

Diagrams in a sales deck or pitch video

A drawn diagram works in a pitch when it builds at the pace of what you are saying.

  1. 01

    Draw the diagram

    Upload the finished funnel, flow or chart and press Draw it. Set the length to the sentence or two you will say over it, and pick one of six hands or none.

  2. 02

    Export an MP4

    Free exports are 720p and watermarked; any credit pack (20 for $10) or plan removes the watermark and unlocks 1080p. Pricing.

  3. 03

    Put it in the deck

    In PowerPoint, Insert > Video > This Device. By default it plays in the click sequence; on the Playback tab, Start can make it play automatically when the slide appears. Microsoft recommends MP4 with H.264 video.

  4. 04

    Or cut it into the pitch video

    In a video edit, lay each clip under the line of voice-over that explains it and trim the pauses.

A hand-drawn timeline: four clips of different lengths (a light bulb, a raincloud, a lighthouse, a coffee cup) above a voice-over waveform, with red dashed lines showing each cut falling on a pause in the voice.
Illustration: An illustration of laying drawn clips under a voice-over in your editor. Not a screenshot of any app.

We draw a finished picture: we do not write the script, record the voice-over or build the scenes. For tools that make a whole explainer video, see Whiteboard animation software compared.

Which to use

  • Your diagram is already a picture

    Upload it here: real strokes, outlines then colour, timed to your narration, with or without a hand.

  • Every step on its own click

    PowerPoint Wipe on separate shapes, or one drawn picture per step here.

  • A diagram on a web page

    SVG stroke-dashoffset: exact order and real strokes, if you have the paths.

  • A route across a map

    Trim Paths in After Effects or SVG for the route; draw the map itself here if you want it hand-drawn.

To make a picture look drawn by other means (CapCut masks, Procreate time-lapse, AI video), see Turn an image into a drawing animation.

Sources

Steps from Microsoft Support, MDN and Adobe, read 1 November 2026; we have not run PowerPoint or After Effects for this guide. The SVG runs are ours, the same day, in Chrome 156.

FAQ

Questions

Upload the diagram as a PNG, JPEG or WebP here and a hand draws every outline, then the colour; set the length to your narration and export an MP4. In PowerPoint, give each part a Wipe entrance with After Previous, or replay ink you drew. On a web page, animate each SVG path’s stroke-dashoffset to 0.
Here the whole infographic is drawn outlines first, then colour, at the length you set. For each step on its own beat, export one picture per step and draw each (one credit each), or build the steps as shapes in PowerPoint with Wipe and After Previous, or as SVG paths with their own start times.
Draw the finished diagram here, export an MP4, and in PowerPoint choose Insert > Video > This Device; set Start on the Playback tab so it plays automatically or on click. In a pitch video, lay each clip under the line of voice-over it illustrates. Free exports are watermarked; any credit pack or plan removes it.
Trace the route as a vector path and reveal it with Trim Paths in After Effects (Adobe’s Animate a map tutorial) or with SVG stroke-dashoffset, which we ran for this guide. A hand-drawn map illustration uploaded here is drawn outline first, then colour; we have no map example yet, and the route is drawn with the rest of the line art.

Your picture is one upload away from moving.

Draw 5 pictures free