Scalable Vector Graphics · in motion

See what SVG can really do.

Five interactive playgrounds — line-drawing, shape morphing, native filters, motion paths & physics, and generative art. Every pixel here is math, not a bitmap. Resize your window; nothing blurs.

01 — Paths

Drawing & morphing

A path is just a list of coordinates. Animate how much of it is drawn and you get self-writing line art. Interpolate one path's points into another's and shapes morph.

Path drawing · svg.createDrawable
Shape morph · svg.morphTo
02 — Filters, gradients & masks

Light, liquid & reveal

SVG ships a tiny GPU-backed image-processing pipeline: blur into glow, turbulence into liquid, gradients that animate, and masks that reveal. All declarative, all resolution-independent.

Gaussian glow
Turbulence + displacement
move me
Animated mask · spotlight hover the panel
03 — Motion & physics

Follow the path, feel the spring

Bind anything to a path and it inherits the curve — position and heading. Add a spring and static vectors become tactile: throw them, they settle.

Motion path · svg.createMotionPath
Draggable + spring release grab & throw the orbs
04 — Generative & data

Made by code, drawn as vectors

Because SVG is just markup, code can author it. A seed becomes a constellation; a dataset becomes a chart that draws itself. Regenerate as many times as you like.

Generative constellation
Self-drawing data-viz