Hey Product Hunt! 👋 I'm Daphne, and I'm excited to share Wobble SVG with you today. As a product designer focusing on design systems, I wanted a reliable way to make UI components look organically hand-drawn (without hand-drawing every single state in Figma --> only to fail to export as code and have to manually copy over the SVG --> super bloated!). I found that existing tools either relied on constant SVG strokes (think Rough.js) or produced non-deterministic outputs, which undermined testability. I made this so designers can go CREATIVE when making designs for the web, and developers can have some fun and build something that looks unique and organic! Wobble was built to generate true variable-width strokes—similar to Figma's Dynamic Stroke—while keeping everything completely deterministic via a seeded PRNG. This means your design systems stay perfectly reproducible. A few quick highlights: Zero dependencies: It is incredibly lightweight (~4KB gzipped). Framework-agnostic: It outputs plain path data that works everywhere, from standard web elements to React Native. Animatable: You can smoothly morph between seeds for some really fun micro-interactions. I would love to hear your feedback or see what you build with it. Let me know if you have any questions!

wobble svg

Make your UI look drawn by hand [using code]!

Make your UI look drawn by hand [using code]!