Treehouse Code Adventures > 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.

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.

HTML Basics

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

CSS Basics

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

SVG Basics

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

CSS Transitions and Transforms

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

Animating SVG with CSS

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

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.

0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
1
Use the background.svg file to create a tiled background on the body of the site, as shown on the mockup.
2
Create a navigation menu to match the mockups using the supplied SVGs.
3
When a user hovers over a nav menu item, use CSS to change the color of both the text AND the inline SVG.
4
Insert the logo.svg to match the mockup using the inline SVG method.
5
Use the corgi.svg to create a <symbol> element for corgis in the the index.html file.
6
Use the <use> element to recreate four copies of the corgi svg in the layout of index.html matching the mockup.
7
Use the currentColor CSS value to make the body of each corgi unique, matching the mockup.
8
Add a CSS transition or animation effect to the logo hover state or page load.
9
Add a CSS transition or animation effect to the corgi hover state or page load.
10
Add a CSS transition or animation effect to the nav menu hover state.