/interactive-svg

Make an embedded SVG graphic with animations & transitions.

Primary LanguageHTML

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.