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.

GOOD MOOD (6 part series)
  1. Introduction
  2. Drawing the letters
  3. Animating the letters
  4. Applying filters
  5. Pixel ratio
  6. Conclusion

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.