Skip to main content

GOOD MOOD introduction: SVG animation

· One min read

In the introduction, I explain where the idea of reproducing an animation in SVG came from.

The idea came while I was browsing through Dribbble. I came across this animation by Mat Voyce called GOOD MOOD:

GOOD MOOD - Mat Voyce

GOOD MOOD by Mat Voyce, via Dribbble

I've been wanting to learn more about SVG for a while, and I thought it would be interesting to try and reproduce this animation. I separated in some posts what I learned:

  1. Drawing the letters: path element's commands
  2. Animating the letters: animation with animate element
  3. Applying filters: filters with filter element
  4. Pixel ratio: SVG rendering
  5. Conclusion: final thoughts

I set out to make a similar reproduction, the objective wasn't to create an exact replica, but to do a study on SVG animations.