SVGs that feel like GIFs

2025-07-07

The moving image below is only 49Kb and has an incredibly high resolution.

moving svg

It's similar to a GIF but instead of showing moving images, it shows moving SVGs! The best part: Github supports these in their README.md files!

Getting these to work involves asciinema and svg-term-cli. After uploading the asciinema you can use the tool to download a file that you can immediately click and drag into a README. It's something that I'm using extensively on bespoken.

How it works?

I was surpised to learn that moving SVGs were even a thing. But then I was reminded that animations are built into the svg spec.

  • <animate> - animates individual attributes over time
  • <animateTransform> - animates transformations like rotation, scaling, translation
  • <animateMotion> - moves elements along a path

This is what the svg-term-cli leverages under the hood.