Tag Archives: svg

Dynamic Bézier Curves

Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep … Continue reading

Elsewhere , , , Leave a comment

Convert SVG to JSX with SVGR

Ooh, this one’s handy. Paste in (no drag and drop unfortunately) the contents of an SVG file and out comes the JSX code for immediate use within your React project. SVGR also simplifies your SVG using SVGO (which is also … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , , , Leave a comment

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 … Continue reading

Elsewhere , , , , Leave a comment

Morphing Page Transition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom … Continue reading

Elsewhere , , , Leave a comment

Changing SVG path data with CSS

Another great thing I learnt at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS. As Chris Coyier demoed, one can overwrite the SVG’s path … Continue reading

Original Content , , 2 Comments

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 … Continue reading

Elsewhere , , 1 Comment

Reverse clip path with blend modes

Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor. The gif and … Continue reading

Elsewhere , , , Leave a comment

SVG Line Animation for the Uninitiated

In case you’ve missed Jake’s post “Animated line drawing in SVG” back in 2013, a refresher on the subject 🙂 SVG Line Animation for the Uninitiated →

Elsewhere , , , Leave a comment