🖼️ SVGs That Move Like GIFs—But Smarter

Vincent introduces a clever technique for embedding animated terminal recordings into GitHub READMEs using SVGs instead of GIFs. The result? Crisp, lightweight visuals that feel like GIFs but are built on scalable vector graphics.

🔧 Tools Used

• asciinema: Records terminal sessions as .cast files.

• svg-term-cli: Converts .cast files into animated SVGs.

asciinema rec test.cast # Record your terminal session

cat test.cast | svg-term --out=test.svg # Convert to SVG

You can then drag the .svg file directly into your GitHub README.

💡 How It Works

SVGs support native animation via:

• <animate>: Changes attributes over time.

• <animateTransform>: Handles rotation, scaling, translation.

• <animateMotion>: Moves elements along a path.

These are part of the SVG spec and are leveraged by svg-term-cli to simulate terminal motion.

📦 Real-World Use

Vincent uses this technique extensively in his project bespoken, showcasing terminal interactions in a visually engaging way—without bloated GIFs.

✨ Why It’s Cool

• Smaller file size (e.g., 49KB for high-res animation)

• Scalable resolution (no pixelation)

• GitHub-friendly (works in markdown)

• Open-source tooling