SVG animation

interactive animated graphics in a web page

Hedegehog Security asked me to create these interactive animations (hover the cursor over them to initiate the action, or tap them if you’re looking at a phone).  They are created with SVG code. Scalable Vector Graphics is an open standard that was developed by W3C back in 1999. Under the hood is XML style markup describing 2D vector shapes, paths and colours, similar to what you get in Adobe Illustrator.

Using Animate CC, a plugin called SnapSVG and a smidgen of Javascript, animation that responds to mouse events can be created and embedded into regular HTML. The file size is tiny and the image can be any size without losing resolution. Brilliant, eh!

Using this technique I can even recreate a lot of my old Flash animation for today’s devices. This makes me so happy I’ve written an article about it.


  • Hedgehog Security


  • Animation
  • Illustration
  • Javascript