Animating an SVG cat with React.js
summary
Imports an SVG into a React app, runs SVGR CLI to optimize and convert it into GSX, replaces hardcoded colors with a color prop, and computes aspect ratio (width/height ≈ 0.84) to make a size prop work. Animations use Framer Motion: eyes animate with scaleY 1→0.1→1 (duration 0.25s, repeatDelay 4s) and the tail rotates 0→20→0 with adjusted transform-origin and a translateX fix. Result is a customizable SVG cat component that blinks and wags and renders correctly.
AI-written summary · about
chapters (19)
- 0:00Intro
- 0:35About Elizabet
- 1:18What is an SVG
- 1:45Wikipedia definition
- 2:24Why is SVG different
- 2:39SVG file size
- 3:07How to use the SVG
- 3:50Why would you do this
- 4:07Importing React components
- 5:16Inspecting SVG
- 5:54Importing as React components
- 6:18The bad thing about this method
- 6:46The second way
- 7:15Sketch
- 7:30Shading
- 10:58Config file
- 15:43Aspect ratio
- 16:52Frame Emotion
- 18:03Motion
