SVG Knight Animation

Overview

This project was created in my Advanced CSS class and focuses on building an animated SVG illustration. I used Adobe Illustrator to trace and separate the elements of the scene, then used CSS animation to add movement to the knight, dragon, clouds, and sun.

Process

First, I created the illustration in Illustrator and separated each element so it could be animated individually. I then exported the SVG and used CSS animations to control movement, timing, and interaction between the elements.

Challenges

One challenge was organizing the SVG elements so they could be each animated independently. Another was adjusting the animation timing to make the movement all align as it should.

Outcome

The final result is a dynamic animated scene that demonstrates how CSS animation can add life and storytelling to a web project. The project also helped strengthen my understanding of SVG structure and animation techniques.