Coding & Development
wobble svg
3h agowobble‑svg is a tiny, zero‑dependency library that generates portable SVG path data mimicking hand‑drawn ribbons. It offers deterministic, seeded output so the same inputs always produce identical paths, supports variable‑width strokes, and works across web SVG, React Native (react‑native‑svg), Canvas, and print environments. Core exports include utilities for creating rectangular boundaries, generating wobble ribbons, and animating them.
Generate hand‑drawn SVG pathsDeterministic seeded outputVariable‑width ribbonsZero dependenciesCross‑platform compatibilityCore export functions
Key Capabilities
01
Generate hand‑drawn SVG paths
Creates SVG path data that looks hand‑drawn, usable in <path> elements or similar graphics APIs.
02
Deterministic seeded output
Using a seed (e.g., 42) ensures the same shape is reproduced consistently for design systems and testing.
03
Variable‑width ribbons
Provides true variable‑width strokes rather than constant SVG strokes, similar to Figma's dynamic stroke.
04
Zero dependencies
The library has no external dependencies and works as both ESM and CJS modules.
05
Cross‑platform compatibility
Generated paths can be used on web SVG, React Native via react‑native‑svg, Canvas, or printed media without requiring DOM APIs.
06
Core export functions
Exports utilities like roundedRectBoundary, generateWobbleRibbon, generateWobblePath, and animateWobbleRibbon for building custom shapes.
Use Cases
Hand‑drawn UI componentsCreate unique, hand‑drawn styled UI elements directly from code, reducing the need for static assets.UI/UX designers and front‑end developers
Game asset generationGenerate custom, responsive graphical components for games without manual splicing of assets.Game artists and developers
Asset reduction for appsReplace image asset libraries with programmatic SVG generation, simplifying imports and dependencies.Application developers and DevOps teams
Update History
Updated 3h ago▲ 0% mentionsProduct HuntWeb