| summary | Make an embedded SVG graphic with animations & transitions. |
|---|---|
| time | 1 hour |
| deliverables | 1 HTML file, 1 CSS file |
| download | https://assets.learntheweb.courses/web-dev-3/interactive-svg-download.zip |
- Fork this repository.
- Export the downloaded Adobe Illustrator file (
bear.ai) into an SVG—and clean it using Spritebot. · Illustrator to SVG exporting instructions · SVG cleaning instructions - Embed the SVG code directly in the
index.htmlfile. - Add the interactivity (transitions & animations) to the SVG in the CSS file.
- Run it through Markbot and make sure it passes all the checks.
- Expected IDs:
#left-eye,#right-eye,#nose,#left-ear,#right-ear,#face - Transition times:
.5s - Animation times:
3s
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.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.