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 […]

Create interactive SVG maps in React with react-simple-maps

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson. react-simple-maps → Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation: How to create pure react SVG maps with topojson and d3-geo → Mapping Tutorial: Combining Victory Charts and React-Simple-Maps →

Smooth SVG Path Morphing with flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it. Installation per npm: npm install flubber Note that flubber only calculates the interpolated data: import { interpolate } from “flubber”; const triangle = “M1,1 L2,1 […]