The moving image below is only 49Kb and has an incredibly high resolution.
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, or you can use this snippet to keep things local:
> asciinema rec test.cast
<do stuff in the terminal then ctrl-d>
> cat test.cast | svg-term --out=test.svg
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.