SVG SketcherHow the sketch effect works
A hand-drawn line is not a wobbly line. If you just add random noise to a vector path you get something that reads as broken rather than human. The effect only works if the wobble is smooth - the pen wanders, but it never kinks. Here is what the tool actually does.
1. Everything becomes a path
Rectangles, rounded rectangles, circles, ellipses, lines, polygons and polylines are all converted to path data first. One shape type means one code path for everything that follows, and it means a rounded rectangle keeps its corners instead of being treated as four points.
2. Sampling at even arc lengths
Each path is walked at fixed intervals along its length, collecting points. The spacing scales with the drawing's own dimensions, so a 24-unit icon and a 1000-unit illustration produce a comparable density of detail rather than one being over-sampled into mush.
This step also detects where a path jumps. Along a continuous curve the straight-line distance between two samples can never exceed the distance travelled along the curve - so any gap wider than the sampling step must be a moveto. That is how the outside of a letter o is kept separate from its inner ring, and why holes in glyphs and multi-part icons don't get joined by a stray line.
3. Seeded jitter
Every sampled point is nudged by a small random offset. The randomness comes from a seeded generator rather than Math.random(), which means the same drawing plus the same seed always produces exactly the same sketch. That is what makes a shared link reproduce the drawing you saw, and it stops the whole image reshuffling every time you nudge a slider.
4. Rewoven as a continuous curve
The jittered points are then rebuilt as a cubic Bézier path with C1 continuity: each control point is aimed along the direction between a point's two neighbours, scaled by the smoothness setting. Because neighbouring segments share a tangent direction, the curve never corners abruptly - the line reads as one confident stroke instead of a polygon.
Lines with only two points get special handling: they are bowed sideways by a small amount, because a straight line drawn by hand is never quite straight.
5. Drawn twice, optionally
The Pencil preset runs the whole process twice with different jitter and overlays the results. Two nearly-coincident strokes is what most hand-drawn styles actually look like up close, and it costs nothing but a second pass.
About the animations
The animated modes generate several complete redraws and cycle between them with a CSS steps() animation - the “boil” you see in hand-animated cartoons. The draw-on effect uses pathLength="1" on every path, which lets a single stroke-dasharray: 1 rule be exactly correct for every path regardless of its real length.
The preview applies the exact CSS you copy, to the exact markup you copy. There is no separate preview implementation that can drift away from the exported code.
Drawing your own
The Draw tab is not a separate pipeline. It captures your strokes, thins each one down to the points that carry its shape (Ramer–Douglas–Peucker), and emits ordinary SVG — from there the sketch engine treats it exactly like a pasted icon.
Two things happen on the way out. The drawing is cropped to what you actually drew, so a doodle in one corner does not export as mostly empty space; and it is scaled to a 24-unit box, because stroke width is measured in viewBox units — leave a drawing at pad scale and every style preset renders as a hairline.
Each stroke stays its own path, in the order you drew it. That is what makes the draw-on animation replay your drawing the way you made it, rather than in some arbitrary order.
How the frames differ from each other
Each frame's jitter comes from two seeded generators, not one. The first is keyed on the seed alone, so it produces the same offsets in every frame; the second is keyed on the frame number too, so it changes. Frame variation decides how the wobble is split between them. Near zero, every frame shares one line that only breathes slightly - the shape stays recognisable and the boil reads as a living drawing. At one, each frame is redrawn from scratch and the line jumps around, which is the right look for a scratchy title card and the wrong one for a logo.
That split is what makes a high frame count useful: sixteen frames of a redrawn-from-scratch line is noise, while sixteen frames of a gently drifting one is a smooth boil.
Video and the green screen
The video export draws the same animation onto a canvas with Path2D and records it with the browser's own MediaRecorder - still no server, and still nothing uploaded. The timing is copied from the CSS keyframe for keyframe, including the ease-in-out curve and the per-path stagger, so the clip matches the preview.
The background is solid because no video format a browser can record carries transparency. A flat, saturated key colour is the standard way around that: drop the clip into your editor, key the green out, and the sketch sits over your footage. Recording happens in real time, so a ten-loop clip takes ten loops’ worth of seconds.