Design Process note - I wanted to add sparkles to the headers of each section to give the site a bit of movement. Traditional thinking was if you need to animate a image you make a animated gif. I did that and quickly realized that wouldn't produce a smooth animation for the small sparkles. After researching different options I landed on SVG (Scalable Vector Graphics). With SVG the sparkles could remain vector and sharp instead of a pixelated sparkle image.
Before
Animated gif - pixelated & rough animation

VIDEO

After
SVG - sharp vector lines & smooth animation