Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > SVG Animations

SVG Animations

SVG Animations

Use SVGs to spruce up and add a bit of character to a website. Some basic HTML and CSS are required. You'll need to use the SVG files provided to match the mockup as closely as possible.

Desktop icon
Start Adventure

Created: 11/06/2023 by Brian Jensen

Skill level: beginner

Topics used: HTML CSS

Estimated completion time: 6 hours

    Use SVGs to spruce up and add a bit of character to a website. Some basic HTML and CSS are required. You'll need to use the SVG files provided to match the mockup as closely as possible.

Code adventure mockup image

HTML Basics

Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.
Code adventure mockup image

CSS Basics

Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
Code adventure mockup image

SVG Basics

Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors.
Code adventure mockup image

CSS Transitions and Transforms

With CSS transitions and transforms, you can create simple animations that enhance user interactions in websites and apps.

Code adventure mockup image

Animating SVG with CSS

This short course covers the most common methods for animating SVG: CSS transitions, transforms, and keyframe animations.
Code adventure mockup image

SVG Workflow and Tools

Learn useful tools and techniques for optimizing, organizing, and structuring your SVG files. Then learn to size and scale your SVG with inline attributes.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use the background.svg file to create a tiled background on the body of the site, as shown on the mockup.

  3. 2

    Create a navigation menu to match the mockups using the supplied SVGs.

  4. 3

    When a user hovers over a nav menu item, use CSS to change the color of both the text AND the inline SVG.

  5. 4

    Insert the logo.svg to match the mockup using the inline SVG method.

  6. 5

    Use the corgi.svg to create a <symbol> element for corgis in the the index.html file.

  7. 6

    Use the <use> element to recreate four copies of the corgi svg in the layout of index.html matching the mockup.

  8. 7

    Use the currentColor CSS value to make the body of each corgi unique, matching the mockup.

  9. 8

    Add a CSS transition or animation effect to the logo hover state or page load.

  10. 9

    Add a CSS transition or animation effect to the corgi hover state or page load.

  11. 10

    Add a CSS transition or animation effect to the nav menu hover state.