A browser-based studio for creating interactive particle animations from any SVG. Real-time physics, mouse interaction — export production-ready React code.
Hover the canvas to see the physics in action
— Capabilities
Paste raw markup or drag-and-drop a file. Any shape, any complexity — the sampler rasterises it and maps every filled pixel into a precise 2D point cloud.
Tune repulsion radius, spring return speed, and damping live. Every slider change is reflected in the WebGL canvas on the next frame without reloading.
One click generates a fully self-contained React + TypeScript component with your exact config baked in — no extra dependencies beyond Three.js.
— How it works
Upload your SVG
Paste SVG markup or upload a .svg file. The engine rasterises it and samples every filled pixel into a precise 2D point cloud.
Tune the physics
Adjust particle size, mouse repulsion strength, return speed, and damping until the motion feels exactly right.
Export the component
Hit Export Code to receive a self-contained React + TypeScript component ready to drop into any project.
— Interactive Demos
Hover each canvas below to see real-time physics. Every demo is live WebGL — not a recording.
Iconic
Infinity Loop
Geometric
Hexagon Grid
Dynamic
Starburst
Open the playground and start animating in seconds — no account, no install, no limits.
Start Creating