erinborgmeyer / interactive-svg

Make an embedded SVG graphic with animations & transitions.

Interactive SVG

• Approx. completion time: 1 hour
• Deliverables: 1 HTML file, 1 CSS file

---

Make an embedded SVG graphic with animations & transitions.

1. Export the Adobe Illustrator file included in this repo (bear.ai) into an SVG—and clean it using SVGOMG.
   · Illustrator to SVG exporting instructions
   · SVG cleaning instructions
2. Embed the SVG code directly in the index.html file.
3. Add the interactivity (transitions & animations) to the SVG in the CSS file.

---

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.