Exercise 6 — Animated SVG

Files

Exercise file download (opens new window)

Introduction

In this exercise, you'll create an animated SVG loader to enhance user experience during application loading times. This task combines design skills with basic web development to implement a visually appealing and functional loader.

Instructions

To successfully complete this exercise, follow these steps:

1. Download the started File:

• Download and open the provided file for this exercise from Brightspace.

2. Design Your Loader:

• Utilize Adobe Illustrator to design your loader. Pay attention to optimizing your layers for web export during this process.

3. Export and Prepare the SVG:

• Export your loader design as SVG using the 'Export as...' option in Illustrator. Make sure your file is properly optimized for web use.

4. Integrate the SVG into HTML:

• Embed the SVG code directly into the index.html file of your project. This step involves copying the exported SVG code into the HTML file.

5. Refine the SVG Code:

• Clean up the SVG code by removing any unnecessary xml tags. Also, ensure that all styles are externalized to a CSS file rather than being in the SVG code.

6. Create a Multi-Step CSS Animation:

• Craft a CSS animation that unfolds across multiple stages to add dynamic visual interest. Aim to design an animation sequence that integrates several keyframes, creating a compelling and engaging motion effect.

Example

Do not copy the example below.

File Structure

Package your files into a single compressed folder named firstName-lastName-sectionNumber-animated-svg. Your submission should include:

• ./css/
  • main.css (for styling your SVG loader)
• index.html (containing your SVG code)
• Loader.ai (the original Illustrator file)

Submission

Refer to Brightspace for your section's due date.

• Open BS LMS and go to the Activities > Assignments page.
• Go to Exercise 6 — Animated SVG
• Upload your compressed folder on the assignment page in BS LMS and click the submit button.