Scribble Animator – Hand-Drawn Signature Animation & Text Animation Tool
Bring your handwriting and sketches to life with Scribble Animator – the all-in-one
drawing and animation app. Create smooth
signature animations, dynamic text animations, and hand-drawn sketch effects.
Whether you’re a designer, animator, or digital artist, you can export your creations as
SVG, PNG, JPEG, MP4, MOV, or even After Effects for professional
workflows.
Why Use Scribble Animator?
Signature Animation: Animate your handwritten signatures for logos, branding, and
intros.
Text Animation: Reveal and animate text with handwriting-style effects.
Custom Brushes: Adjust size, softness, flow, and taper for unique sketching.
Color Picker & Swatches: Choose precise colors or quick swatches.
Gallery & Presets: Save, load, and reuse your favorite brush settings.
Export Anywhere: Share in SVG, PNG, MP4, MOV, or edit further in After
Effects.
Start Animating Today
Use Scribble Animator to draw, animate, and export your text or signatures in seconds.
Perfect for creating intro animations, explainer videos, handwritten logos, and digital art
projects.
Scribble Animation
Scribble animation simulates the look of quick marker or pencil strokes that draw themselves on screen. With
Scribble Animator you can record stroke order, tweak easing, and export a clean video or SVG path for web
use.
Hand-Drawn Animation
Create authentic hand-drawn animation for logos, titles, and explainers. Adjust brush size,
taper, and pressure to get an organic pen-on-paper feel.
Draw Scribbles in Your Browser
Open the app, pick a brush, and draw scribbles freely. Use the Bezier editor to refine
curves, then animate per-stroke or all at once.
Sketch Animation
Switch to Sketch style to get a textured pencil vibe and generate sketch animation reveals
for text or signatures with custom timing and easing.
FAQs
What is scribble animation?
It’s an effect where lines are “drawn” on screen, mimicking hand-made scribbles or handwriting.
How do I make a hand-drawn text reveal?
Type text → Add to canvas → Choose Grow mode → Set anchor and easing → Export MP4/MOV/GIF.
Can I export transparent video?
Yes—use MOV with transparency enabled to overlay on other footage.
100%
Edit Mode
No font loaded
Processing…
MAT precision
Scale Axis s
max err
step (px)
Font px
📘 Full Guide
🖱️ Tools & Canvas
Select – select / move / transform strokes
Draw – freehand drawing with brush
Sketch – Stylize brush with sketch
Erase – remove strokes with eraser
Text – add/edit text objects
Clear – wipe the whole canvas
* In Edit Bezier mode: double-click a stroke to add nodes, right-click a
node to remove it. On touch, long-press to add or remove nodes.
🖌️ Brush
Freehand Mode – toggle freehand vs. straight strokes
Sketch Style – toggle Sketch vs. Pen strokes
Size – overall thickness of the brush
Adjust how thick or thin the line is.
Taper – fades the stroke at the ends
Higher values make the beginning and end of
strokes more pointed.
Thin – pressure sensitivity for line width
Available in Freehand Mode -- Negative
values = thicker under pressure, positive = thinner under pressure.
Phase – Offset the Thin/pressure
Available in Freehand Mode -- Cycles ther
pressure map.
Presets – pick any brush preset
Reset – restores default brush settings
* The controls (Size, Thin, Taper, Calm) all use a single slider. Select the property first,
then drag the slider — changes apply to the current selection.
*Select any stroke from the canvas with the Select tool to fine-tune its
settings.
🎨 Color
Pick Color – SV square (saturation/value), Hue bar, and Alpha bar
Drag inside the square for brightness &
saturation, hue bar for color, and alpha bar for transparency.
HEX Input – enter or copy color codes
Supports 3- or 6-digit hex (#FFF, #FFCC00)
and updates live.
Swatches – quick access to saved colors
Click a swatch to instantly set the color.
Target – Brush or Background
Choose whether the color applies to your
strokes or the canvas background.
*Select any stroke from the canvas with the Select tool to fine-tune its color.
🗂️ Gallery
Save – store the current canvas (or just a selection)
Name your item and it’s saved in My
Library.
Load – place a saved item back on the canvas
Use Load to center it, or drag
items directly onto the canvas.
Search & Favorites – filter your library
Search by name or ★ mark items for quick
access.
Import / Export – share packs as JSON or SVG
Export a pack of selected items, or import
files into your library.
Delete – remove items or entire packs
Built-in packs can’t be deleted; user packs
can.
🎞️ Animation
Modes – Grow (stroke draws in order) or Pop (scale-in
effect)
Grow uses anchors (start or end) for direction; Pop grows strokes from center.
Scope – Per Stroke or All
Animate strokes individually, or play them all together as one sequence.
Speed – duration of the full animation
Click drag to adjust the duration of the animation.
Random – shuffle stroke order for varied results
Click drag to adjust the random seed order.
Overshoot – toggle easing overshoot
Styles: Classic or Heavy.
Easing – edit cubic-bezier curve in the Bezier panel
Custom easing applies across strokes (uniform ease toggle available).
Selection Order – animate strokes in the order you selected them
Enable the mode, then click layers one by one in the order you want them to play.
Animate – press to preview on the canvas
Click anywhere or switch tabs to stop playback.
📤 Export
SVG – export as centerline or outline.
Options: preserve colors toggle, Copy Path to clipboard, or download as
static .svg.
PNG – export raster images at scale 1×–4×.
Supports transparency and HiDPI scaling.
Choose scale 1×–4×. Quality tuned for crisp vector shapes.
JPEG – same as PNG but always opaque.
Choose scale 1×–4×. Quality tuned for crisp vector shapes.
MOV – video export with alpha channel (transparent background
supported).
Options: scale, FPS, background fill.
MP4 – H.264 video export.
Options: scale, FPS, background fill. Encoded for web compatibility.
🔤 Text Editor
Font Browser – search, filter, and mark fonts as favorites
Type your text and explore fonts by category or ★ bookmark for quick access.
Canvas Controls – zoom, undo, and redo for editing
Adjust your view with zoom and step through changes with undo/redo.
Add To Canvas – insert text paths for further editing
Places your text as vector paths on the drawing area for shaping and styling.
Edit Mode – adjust Bezier curves by editing points
*Add, move, or remove control points to refine shapes with precision.
** double-click a stroke to add nodes, right-click a node to remove it. On
touch, long-press to add or remove nodes.
⌨️ Shortcuts
Undo – Ctrl/Cmd + Z
Redo
Mac: Cmd + Shift + Z
Windows/Linux: Ctrl + Y or Ctrl + Shift + Z
Delete Selected – Delete / Backspace
If nothing is selected, it clears the selection or canvas.
Select All – Ctrl/Cmd + A
Zoom In – Ctrl/Cmd + Plus (+)
Zoom Out – Ctrl/Cmd + Minus (–)
Reset Zoom / Fit to Screen – 0 (with or without Ctrl/Cmd)