Tag Archives: svg

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

CSS vs. SVG Gradient Angle

Nice pen by Ana Tudor in which you can see how the angle set for a CSS Gradient and set for an SVG Gradient differ: . At a 45° angle you can clearly see exactly what the difference between the … Continue reading

Elsewhere , , Leave a comment