Skip to content
Enter studio
+N° 001 — SVG PARTICLE STUDIOBROWSER-NATIVE
/ NO SIGN-UP
FIG. 01TREFOIL
SOURCE
PROCEDURAL / 3D
POINTS
—
STATE
STILL

Nothing
stays static.

Drop in an SVG. Watch it come apart into thousands of particles that dodge your cursor and spring back. Then take the whole thing home as a React component.

Open the studioHow it works
PICK A FORM
SCROLL — SEE HOW A SHAPE BECOMES PARTICLES[ SVG → POINTS → PHYSICS → REACT ]
01From shape to something elseSCROLL TO SCRUB

THREE STEPS, ZERO SETUP

  1. /01

    Start with a shape.

    Drop in any SVG. It’s drawn to a canvas and read one pixel at a time. Every filled pixel becomes a point.

  2. /02

    Find its personality.

    Every point is a small spring. Your cursor knocks it away; it finds its way home. You choose how far, how hard, how bouncy.

  3. /03

    Take it with you.

    Export a single React + TypeScript file with your SVG and physics baked in. Paste it into any project.

ROW 000/150 · 0 POINTS
02The experimentsTOUCH IS ENCOURAGED

Go on.
Disturb the peace.

These aren’t pictures. They’re tiny playgrounds running the same engine as the studio. Pick a shape and move your cursor through it.

SELECT A SPECIMEN
Continuous / 01

One continuous line. A thousand little possibilities.

Make it your own
FIG. 01 / INFINITYINTERACTIVE PREVIEW
A STILL MOMENT. MOTION REDUCED.
03The exportNO LOCK-IN

Made to leave
the browser.

When it feels right, export it. You get one readable file with nothing hidden: no runtime, no account, no tracking.

SvgParticleAnimation.tsxLINES 41–48 OF 159
41// ─── Particle Field ──────────────────────────────────────────────42const PARTICLE_SIZE = 0.9;43const OPACITY = 1.00;44const MOUSE_RADIUS = 40;45const MOUSE_STRENGTH = 8;46const RETURN_SPEED = 0.08;47const DAMPING = 0.85;48const COLOR = "#eae7de";
… SHADERS, SPRING SOLVER AND YOUR SVG CONTINUE BELOW
THEN, IN YOUR PROJECT
1// npm install three @react-three/fiber2import SvgParticleAnimation from "./SvgParticleAnimation";34export default function Hero() {5  return <SvgParticleAnimation />;6}
Files
1
Dependencies
three, @react-three/fiber
Your SVG
Inlined
Your physics
Baked in
Make one and export it