Chapter 32: SVG Animation in React

Core Idea

Animate SVGs in React - Line drawing and morphing effects, and more.

Key Concepts

• Overview: SVG animations are performed via the motion component.
• Animate viewBox: The motion.svg component can additionally animate viewBox.
• Transforms: SVG transforms work differently to CSS transforms.
• x/y/scale attributes: motion components provide shorthands for x
• Passing MotionValue: Motion values should be passed via style
• Line drawing: Motion simplifies the creation of “hand-drawn” line animations using three special values.
• Path morphing: It's possible to also animate the shape of a path via its d attribute.
• 430+ production-ready examples.: JavaScript
• Drag gesture: SVG elements can be made draggable in the same way as their HTML counterparts

Code Examples

<motion.svg>
  <motion.circle />
</motion.svg>

• What it demonstrates: Core usage pattern for SVG Animation in React.

Key Takeaways

1. SVG Animation in React supports Overview.
2. SVG Animation in React supports Animate viewBox.
3. SVG Animation in React supports Transforms.

Connects To

• SVG animation: SMIL vs CSS vs JavaScript compared: related Motion doc page.
• React motion component: related Motion doc page.
• Motion Values: related Motion doc page.
• MotionConfig: related Motion doc page.
• React Animation: related Motion doc page.