SVG Line Animation with Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Think SVG line animations, but then […]

SVG favicons in Chrome

A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉 🦊 Firefox already has support for SVG favicons, ever since version 41 Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME […]

Easily use SVG files in React Native with react-native-svg-transformer

React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components. This makes it possible to use the same code for React Native and Web. Oh, […]

Making Future Interfaces: Inline SVG

Another great entry in the “Making Future Interfaces” video series by Heydon Pickering. This one here is a basic introduction to SVG. Like with his other videos: even if you already know about the topic he’s talking about: just watch it, the presentation style and puns are great 🙂 Related: Here’s a post of mine […]

Share terminal sessions as animated SVG with svg-term-cli

svg-term-cli is a tool that render asciicast (terminal recordings) to animated SVG. Pass the asciicast id into svg-term in order to convert it: svg-term –cast=113643 –out examples/parrot.svg –frame This asciicast for example: Using the command above, it will render to this SVG: svg-term-cli – Share terminal sessions as razor-sharp animated SVG everywhere →

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts. Load in the bigger one. Once the big version is loaded, replace the small […]