Hand-drawn SVG shapes. Excalidraw style. Friendly diagrams and notes.
โœ๏ธ Preview (Regenerate for new variant)

How to use

  1. Pick a shape (8 types).
  2. Adjust roughness and line width.
  3. Pick fill style (hachure, zigzag, cross-hatch, dots).
  4. Pick colors or use a preset.
  5. Download SVG or PNG.

Key features

  • 8 shapes (rect ยท circle ยท ellipse ยท line ยท arrow ยท star ยท diamond ยท triangle)
  • 6 fill styles (same as Excalidraw)
  • Roughness 0.1โ€“5 (clean โ†’ very hand-drawn)
  • Regenerate for infinite variants
  • 6 presets, SVG/PNG export

Use cases

  • Whiteboard diagrams โ€” friendly and informal
  • Startup pitches โ€” invites discussion via "unfinished" feel
  • Lecture material โ€” student-friendly diagrams
  • Web design โ€” hand-drawn trend
  • Idea sketches โ€” rapid ideation

Why hand-drawn?

Imperfect hand-drawn art creates an "unfinished effect" โ€” it invites discussion and feedback and lowers the viewer's pressure. That's why Excalidraw and Tldraw exploded in popularity. This tool uses the same rough.js library (created by Excalidraw) so visuals are identical.

FAQ

Same library as Excalidraw?

Yes โ€” rough.js, the library Excalidraw built. Same shapes and fill styles.

Why different each time?

Intentional hand-drawn effect โ€” like a human can't draw the same thing twice. Click "Regenerate" until you like the result.

Edit SVG?

Open the downloaded SVG in Figma / Illustrator / Inkscape. Each stroke is a separate path.

Free?

Yes.