Use the free Hand Drawn Shape Maker below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why Sketchy Shapes Feel Friendly
Perfect geometry feels precise, and sometimes precision is the wrong message. A hand-drawn rectangle feels like a sketch, a draft, or an idea, while a perfect rectangle feels like a final decision. That difference is why sketchy shapes are popular in wireframes, comics, explainer graphics, and children’s content: they signal that the idea is open, playful, or in progress. The tool above draws rectangles, circles, lines, and triangles with a hand-drawn wobble, using Rough.js when available, with a built-in wobble fallback, and gives you SVG to download.
Rough.js creates the sketch feel honestly: it draws each edge twice with slight offsets, so lines wobble the way a pen wobbles in a real hand. It also fills shapes with hachure, a pattern of rough parallel lines, instead of a flat fill, which keeps the sketch look inside the shape as well as on its edges. The result looks drawn, not filtered, because the irregularity is in the geometry itself.
How to Use the Maker
Pick a shape first. Rectangles suit boxes, cards, and callouts. Circles suit badges, faces, and highlights. Lines suit underlines, arrows without heads, and dividers. Triangles suit arrows, mountains, and play buttons. Then set the wobble level. Zero is almost perfect, which defeats the purpose, and the maximum is very loose, which suits rough drafts. A middle value around two is the sweet spot for most graphics: clearly hand-drawn, still readable as the intended shape.
Then pick a stroke colour and a fill colour. Dark strokes on a light fill read best, because the sketch lines need contrast to register as lines rather than smudges. Press Redraw whenever you want a new variation, because each draw uses a fresh random wobble. When a version feels right, copy or download the SVG before redrawing, or it is gone.
Using Sketchy Shapes Well
Sketchy shapes work best when the whole graphic commits to the style. One sketchy box on a page of perfect geometry looks like a mistake, while a page of sketchy boxes, lines, and annotations looks like a deliberate sketch. Match your text to the style too: a handwritten or casual font pairs with sketchy shapes, while a stiff corporate font fights them. If you cannot change the font, keep the wobble low, so the shapes feel human without clashing.
Keep sketchy shapes simple. A sketchy rectangle with a short label is charming. A sketchy diagram with twenty overlapping shapes is visual noise, because every wobble competes for attention. Use sketchy shapes for emphasis, such as circling the important part of a screenshot, boxing a key figure, or underlining a headline, and let the rest of the page stay calm.
SVG Output and Editing
The downloaded SVG is standard vector markup, so it scales to any size without blurring and opens in any vector editor. You can recolour it, resize it, or combine several shapes into a larger scene. Because the wobble is baked into the path data, the shape keeps its hand-drawn look everywhere, even in viewers that have never heard of Rough.js. That portability is the point of exporting SVG rather than relying on a library at display time.
One practical note: SVG files with rough fills can be larger than flat shapes, because hachure adds many line segments. For web use, that is rarely a problem at the scale of a few shapes, but if you build a page with dozens of filled sketchy shapes, prefer stroke-only shapes or reuse one shape several times.
Frequently Asked Questions
Why does every redraw look different? Because the wobble is random by design, like a real hand that never draws the same line twice. Redraw until a version feels right, then download it.
Can I use the SVG in slides or documents? Yes. SVG imports into most modern slide and document tools, and it stays sharp at any size. If your tool needs PNG, convert the SVG with any free converter.
What if Rough.js does not load? The tool falls back to a built-in wobble generator that jitters each point, so you still get a genuinely sketchy shape, not an error.
Draw a shape above, redraw until it feels hand-made, and download the SVG.