Flipbook Studio

Draw your first frame, duplicate or add a blank frame, then flip through your animation. Use onion skin, animated text, motion paths, and motion recording to bring it to life.

Autosaved in this browser · Animated SVG and WebM export · MP4 where browser recording is supported

Running pose 1 / 12Original vector frames

Live flipbook example

Runner flipbook example

Twelve editable vector poses extracted from sequence-runner.svg. Play the sequence, step through each drawing, or load all frames into the editor to make your own animation.

Frame order: start at the top left, move right across all three columns, then continue with the next row down.

Change speed8 fps · 125 ms per imageSlow paper flipFast GIF-like clip

Open animated SVG Download current SVG pose

Fill

Outline

Thickness

Outline style

Gradient outline / stroke

Brush style

Alignxy

Alt + mouse wheel

Animation hotkeysShow all paths on canvas

Selection hotkeysCtrl/Cmd+A Select allShift / Alt / Ctrl / Cmd+Click Add/remove shapeShift/Alt+Drag Scale proportionallyAlt+Drag Lock current directionEsc Cancel / deselect

Pick a tool above, then click or drag on the canvas to draw.

Flipbook animationDraw one SVG frame at a time, using the previous drawing like paper underneath.

Frame-change speed8 fps · 125 ms per imageSlow flip · 1 fpsFast · 24 fps

Onion skinFaintness0.13s per loop

Drag a frame’s ⠿ handle to change its position, or use the arrow buttons. The highlighted frame marks the new position. Select a frame to edit it. “Duplicate + next” keeps the drawing so you can move or redraw small parts; “Blank + next” starts a fresh cel. SVG, WebM, and MP4 exports use this repeating sequence.

Export

Animate drawingTrace connected vector contours in their outline colors, then reveal the finished artwork.

Export artwork

Animated sequence

GIF uses the flipbook FPS. Video duration controls WebM and MP4 recording length.

Video duration6s

Animation export: This single SVG exports as one still image. PNG, JPG (JPEG), and WebP export one still image. Keep this tab active while encoding finishes.

Upload SVG

Drop in an .svg file to add its artwork to the canvas — each disconnected shape lands as its own selectable, editable piece.

Choose or drop an SVG.svg files only — dropped anywhere in this box

Trace image outline / silhouette

New

Upload or drag in an image to trace its outline or silhouette into an editable vector path. Works best with clear silhouettes, high-contrast images, or transparent backgrounds.

Choose or drop an imageAny image size — dropped anywhere in this box

Trace which color as the shape?

Choose black or white to trace dark or light areas. Images with a transparent background trace the opaque part instead.

Canvas

SizeBackground

Select a shape on the canvas to edit its fill, outline, and layering.

My designs

Saved only in this browser — no account, no sync. Clearing site data or switching browsers/devices will lose them.

Draw a shape to start saving designs.