Interactive SVG animation playground with Motion: make your icons delightfully bouncy

An interactive playground for learning and experimenting with SVG animations using Motion. Select icons, apply preset animations or create your own, animate individual elements with staggered timing, and generate Motion code you can use in your projects.

Line drawing animations

One of the most satisfying SVG animation techniques is the "line drawing" effect, where paths appear to draw themselves. Motion makes this incredibly simple with the pathLength property:

<motion.line animate={{ pathLength: [0, 1] }} transition={{ duration: 0.5 }} />

The pathLength property controls how much of the path is visible, from 0 (invisible) to 1 (fully drawn). You can also use pathOffset to shift where the visible portion starts, creating more complex drawing patterns.

Transform animations

Rotating and scaling SVG elements is straightforward with Motion's transform properties. Motion automatically handles transform origins, so elements rotate and scale from their center rather than the SVG's top-left corner:

<motion.circle
  animate={{ rotate: 180, scale: 1.5 }}
  transition={{ type: "spring", stiffness: 200 }}
/>

You can animate from one value to another by providing start and end values in your animation config.

Transition types

Motion offers several transition types, each with their own character and use cases:

Spring transitions feel natural and bouncy, perfect for playful interactions:

transition={{ type: "spring", stiffness: 300, damping: 20 }}

Tween transitions provide precise, predictable timing with easing curves:

transition={{ duration: 0.5, ease: "easeInOut" }}

Inertia transitions simulate momentum and deceleration, great for gesture-based animations:

transition={{ type: "inertia", velocity: 50 }}

Learn more about transitions in the Motion documentation.

Staggered animations

When animating multiple elements, staggering creates visual hierarchy and flow. Motion's custom prop combined with transition.delay makes this simple:

<motion.line
  custom={0}
  animate={{ pathLength: 1 }}
  transition={{ delay: 0 * 0.1 }}
/>
<motion.line
  custom={1}
  animate={{ pathLength: 1 }}
  transition={{ delay: 1 * 0.1 }}
/>

Each element animates with the same properties but starts slightly later, creating a cascading effect.