Demo shape

Every animation on the page redraws with the shape you pick.

draw · 6

Marching ants: a fixed dash pattern crawls along every stroke, forever. Under a non-scaling stroke the pattern is in screen pixels, so the dashes keep their size at any scale.

Open ↗

Draws on, holds, then the tail chases the head off the far end. The dash offset runs on past zero to minus the path length, so the line leaves in the direction it was drawn.

Open ↗

One pen through every stroke in document order: each starts where the last one finished, and its share of the time matches its length, so the pen keeps one speed across the whole drawing.

Open ↗

The stroke draws itself on, as if being written. Measures each path and animates its dash offset to zero.

Open ↗

One long stroke written at the pace of a real signature: slower than it feels it should be, and eased in and out the way a hand gathers speed mid-stroke.

Open ↗

A short bright dash runs the length of each stroke over a dimmed copy of the drawing, which comes back to full strength once the dash has passed. The dash is a fixed slice of the path, not a draw.

Open ↗

transform · 8

Flip Reveal

transform

The drawing swings round from edge-on, in perspective. It is the <svg> that turns, not a group inside it: the outer <svg> is an ordinary CSS box that takes a real 3D transform.

Open ↗

Float Parts

transform

Each part drifts back and forth on its own slow period, forever, so the drawing breathes without any two parts moving together.

Open ↗

Orbit

transform

Everything after the first part circles the centre of the canvas, forever. One shared pivot, so here the canvas is the right reference box, unlike a part turning about itself.

Open ↗

Pulse Ring

transform

Copies of the first part swell outward and fade, half a beat apart, forever. The copies sit behind the original, which never moves.

Open ↗

Parts fly in from a scattered start, each turning about its own centre as it slots into place.

Open ↗

Each part grows from nothing out of its own centre, one after another, with a small overshoot as it settles.

Open ↗

Spin In

transform

The whole drawing spins in from a half-turn back while it grows, overshooting slightly before it settles.

Open ↗

Stagger Drop

transform

Parts drop in from above one after another and bounce as they land. Position and fade are separate animations, since they want different eases.

Open ↗

reveal · 1

Clip Wipe

reveal

A clip rectangle sweeps across, uncovering the artwork left to right. The clip is built in JS, so the markup stays plain art.

Open ↗

morph · 1

Menu bars fold into a cross. Despite living in the morph section this is not a morph at all — three rects translate and rotate, and no path data changes, which is true of most icon "morphs" people reach for MorphSVG to do.

Open ↗