summary | time | deliverables | download |
---|---|---|---|
Make an embedded SVG graphic with animations & transitions. |
1 hour |
1 HTML file, 1 CSS file |
- 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.html
file. - 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.