wobble svg

wobble-svg v0.2.0

Make any component look drawn by hand.

Generate portable SVG paths. Nothing to configure but wobble itself - everything on this page is running live from the package.

Install on npm Star on GitHub
  • Zero deps
  • Deterministic
  • Web + RN

Why Wobble?

Because your UI should be unique.

Variable width

True ribbon fills like Figma Dynamic Stroke - not a constant SVG stroke.

Deterministic

Same seed, same path. Design systems and tests stay reproducible.

Goes everywhere

Plain path data. Web, React Native, Canvas, print - zero DOM APIs.

Where to use Wobble?

Compatible as long as there's a path

Stack

Outputs simple SVG path d strings you can use anywhere: web <path>, React Native (react-native-svg), Canvas, or print. Works in any framework, no DOM required.

  • Web SVG
  • react-native-svg
  • Canvas
  • Print

What does it mean for

  • Designers: create design assets directly from code
  • Game Artists: make custom components responsive! No more splicng!
  • Developers: less asset packages to manage! Easy imports and dependencies!
Production UI with wobble borders and a dialogue bubble

Get started

One line to install, one to copy.

1. Install the package

Click to copy. Zero deps, ESM + CJS, web and React Native.

2. Copy a starter

Build a boundary, then generate a ribbon path. Core exports:

  • roundedRectBoundary
  • generateWobbleRibbon
  • generateWobblePath
  • animateWobbleRibbon
app.js 
import {
  roundedRectBoundary,
  generateWobbleRibbon,
} from 'wobble-svg';

const boundary = roundedRectBoundary(200, 80, 16);
const ribbon = generateWobbleRibbon(boundary, {
  seed: 42,
  halfWidth: 1.2,
  frequency: 0.05,
  wiggle: 1.2,
  closed: true,
});

// <path d={ribbon.fillPath} fill="white" />
// <path d={ribbon.ribbonPath} fill="#2b2420" fill-rule="evenodd" />

Next step

Ship with wobble today.

Install the package, star the repo, or copy a prompt your agent can use to start genrating your own unique ribbon paths.

Install npm Star GitHub