SVG Sketcher
SVG Sketcher
Paste an SVG, upload a file, or type text - get it back hand-drawn. Everything runs in your browser; nothing is uploaded.
The file is read locally in your browser. Nothing is sent anywhere.
Outline traces around each letter. Single line draws each letter as one pen stroke - like a marker drawing.
Outlines are read from the font file itself, so the letters become real sketchable curves.
A TTF or OTF file, read locally in your browser - nothing is sent anywhere. Use this for faces we can't ship, like Arial or Helvetica Neue. It works in both letter styles.
Negative values overlap the letters.
Draw with a mouse, finger or pen. Each stroke becomes its own path, so the Draw animation redraws them in the order you made them.
Double draws every line twice with different jitter - the classic sketched look.
The same seed always redraws the same sketch, so a shared link looks identical for everyone.
How many redrawn variants the loop cycles through. More frames make a smoother boil - and a longer CSS snippet, so keep it low for the web and push it up for video.
How far each frame drifts from the others. Low keeps one recognisable line breathing; 1 redraws the whole thing from scratch every frame.
Behind the video and the GIF. Neither can carry transparency, which is what the green screen is for: key it out in your editor and the sketch drops onto your footage.
The preview above is running exactly this code - no separate implementation to drift out of sync.
Opens the clip by retracing your strokes once - in the order and at the speed you drew them - then the loop starts. Only for artwork made in the Draw tab.
Recording runs in real time, so keep this tab in front until it finishes.
SVG Sketcher: hand-drawn SVG and text, made in your browser
What it does
SVG Sketcher is a free, no-account tool that converts clean vector artwork into strokes that look drawn by hand. Paste an SVG, upload a file, type a word, or draw with your mouse, finger or pen; adjust the wobble, the stroke and the paper, and copy the result out. The whole pipeline - sanitise, sample every path at even arc-lengths, add seeded jitter, reweave the points as smooth Bézier curves - runs in JavaScript on your own machine.
For websites and apps
Export a sketched icon as an optimised SVG or a ready-to-paste React component, or a whole hand-drawn logo that draws itself on with a CSS or Lottie animation. Every generated path carries pathLength="1", so the draw-on effect is exact at any size, and the preview runs the exact CSS you copy - the snippet can never drift from what you saw.
For video editing
Record the animation as a video on a solid green screen - no browser video codec carries transparency, so the flat key colour is the way around it. Drop the clip into Premiere, After Effects, DaVinci Resolve or CapCut, key out the green, and the hand-drawn sketch sits over your footage. Or export an animated GIF for a quick overlay, or Lottie JSON for a motion-design timeline.
Every export
Static SVG, standalone .svg file, React / JSX component, CSS keyframe animation (boil, draw-on, or both), Lottie JSON, animated GIF, and MP4/WebM video on a keyable background. Typed text is turned into real outlines from the font file - from bundled open-licence faces or a TTF/OTF you upload - with an optional single-line style that draws each letter as one pen stroke.
Private by design
There is no server. Files you upload, markup you paste and text you type are never transmitted, stored or logged - you can watch the network tab stay silent while you work. It keeps working with the tab offline once the page has loaded.
Frequently asked questions
- Is SVG Sketcher free?
- Yes. It is completely free, with no account and no paid tier. Ads cover the hosting cost, and no ad script loads unless you accept the consent banner.
- Does my artwork get uploaded anywhere?
- No. There is no backend. Everything you paste, upload, type or draw is processed by JavaScript in your own browser and is never sent, stored or logged. Closing the tab discards it.
- Can I use the sketch in a video edit?
- Yes. Export the animation as a video on a solid green screen, then chroma-key the green out in Premiere, After Effects, DaVinci Resolve, CapCut or any editor, and the hand-drawn drawing sits over your footage. An animated GIF and Lottie JSON are also available.
- What formats can I export?
- Static SVG, a standalone .svg file, a React/JSX component, a CSS keyframe animation, Lottie JSON, an animated GIF, and an MP4 or WebM video on a keyable background.
- Can I sketch typed text or a specific font?
- Yes. Type any text and it is converted to real curves from the font outline - from a set of bundled open-licence faces, or a TTF/OTF file you upload, which also stays in your browser. Proprietary fonts like Arial are not bundled, but metric-compatible stand-ins are, and you can upload the real file.
- Does it work offline?
- Once the page has loaded, yes. The sketch engine makes no network requests, so you can convert artwork with the tab offline.
- Will the same settings always produce the same drawing?
- Yes. The jitter comes from a seeded random generator, so a given drawing plus a given seed always redraws exactly the same sketch - which is what makes a share link reproduce what you saw.
- Can it hand-draw an SVG that contains text or uses
- Live
and