Turn SVGs into Hand-Drawn Sketches

Fine-tune the "imperfections" level. Go from a neat architect's draft to a messy napkin sketch with a single slider.

Choose from Hachure (parallel lines), Cross-Hatch, Zigzag, Dots, Solid, or Dashed fills to texture your shapes.

See changes instantly as you type SVG code or adjust sliders. No waiting for server processing.

Found a variation you like? Lock the "Random Seed" to keep the exact same sketchy pattern across updates.

Copy optimized SVG code directly to your clipboard, ready to be pasted into your HTML or React components.

Adjust stroke widths, colors, and curve fitting to match different pen or marker styles.

Paste your existing SVG markup into the code editor or upload an .svg file.

Use the control panel to adjust Roughness (messiness), Bowing (curviness), and Fill style.

If your SVG has filled shapes, experiment with "Hachure Gap" and "Angle" to create unique shading effects.

Click the Randomize button to cycle through different variations of the "hand-drawn" noise until you find one that looks natural.

Click "Download SVG" to save the file, or copy the code snippet directly for web use.

Use the SVG in your website or design tool just like any other vector graphic.

Simple shapes with clear outlines translate best. Avoid gradients or complex filters in the input SVG.

Real sketches often have lines that overshoot corners. Increase "Bowing" slightly to mimic this effect.

Adjust the stroke width. A slightly thicker stroke often looks more like a marker, while a thin one looks like a ballpoint pen.

Solid fills can look too digital. Use "Hachure" or "Zigzag" fills to mimic coloring in with a pen.

Some styles allow for multi-stroke rendering (drawing the line twice). This adds depth and realism to the "messiness."

Pair your sketchy graphics with a handwriting-style Google Font (like "Indie Flower" or "Permanent Marker") for a cohesive look.

Make low-fidelity mockups look intentionally unfinished so stakeholders focus on flow rather than visual polish.

Create diagrams and charts that feel like they were drawn on a whiteboard, making complex topics feel more approachable.

Quickly convert assets into storyboard panels for video or animation pre-production.

Add character to gaming interfaces, children's apps, or creative portfolios with organic-looking icons.

Render charts and graphs with a sketchy style to suggest estimation or informality in the data.

Stand out in feeds dominated by polished corporate graphics with something that feels personal and handcrafted.

Imperfect lines make content feel friendlier and less formal, encouraging user engagement.

In UX testing, sketchy visuals encourage more honest feedback because users don't feel the design is "final."

Removes distractions like pixel-perfect alignment, forcing the viewer to focus on the core idea or structure.

Dibrand yourself from competitors using sterile stock vectors. Hand-drawn elements convey creativity and human touch.

Unlike scanned pencil sketches (raster images), these are vectors. They stay sharp at any size and have small file sizes.

Since it outputs SVG, any text elements remain selectable and searchable by screen readers and search engines.

Powered by Rough.js, a lightweight graphics library that lets you draw in a sketchy, hand-drawn-like style.

Parses standard SVG 1.1 markup. Supports path, rect, circle, ellipse, line, polygon, and polyline elements.

Generates standard SVG XML. Can be used inline in HTML, as CSS background images, or in vector graphic software.

Client-side rendering. All geometry calculations happen instantly in the browser.

Map parameters like `roughness`, `bowing`, and `fillWeight` to generate the path data.

Free to use. The output code is yours. The tool is built on open-source technologies.