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.
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](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
CSS Basics
Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
SVG Basics
Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors.
![Code adventure mockup image](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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](https://treehouse-code-adventures.s3.amazonaws.com/resource-thumbnails/resource-treehouse.webp)
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.