Tag Archives: svg

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

Elsewhere , , 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

Hiding inline SVG icons from screen readers

Roger Johansson: SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into … Continue reading

Elsewhere , , , Leave a comment

ASCII to SVG

Little tool, written in elm, that converts ASCII to SVG. ASCII to SVG Source (GitHub) →ASCII to SVG Demo →

Elsewhere , , , , Leave a comment

SVG Heat Shimmer Effect

See the Pen SVG Heat Shimmer by Bramus! (@bramus) on CodePen. Using JavaScript the seed attribute of the turbulence filter gets randomised at a given interval. Along with the scale transform, the heat shimmer effect is achieved. SVG Heat Shimmer … Continue reading

Elsewhere , , , Leave a comment