Skip to content

Make an embedded SVG graphic with animations & transitions.

Notifications You must be signed in to change notification settings

ltw-webdev-3/interactive-svg

Repository files navigation

summary time deliverables download
Make an embedded SVG graphic with animations & transitions.
1 hour
1 HTML file, 1 CSS file

Interactive SVG

Overview

  • 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.

Details

  • Expected IDs: #left-eye, #right-eye, #nose, #left-ear, #right-ear, #face
  • Transition times: .5s
  • Animation times: 3s

Goal

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


Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.

About

Make an embedded SVG graphic with animations & transitions.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published

Languages