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 the driving force behind SVGOMG) SVGR : The SVG to JSX transformer →
Tag Archives: svg
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 →
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 grows from a few pixels in height to 100vh, creating the gooey effect. <div class="content …
Changing SVG path data with CSS
Another thing I learned 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 in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. …
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 …
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 the extra background-blend-mode: screen; also give it a nice touch 🙂 Reverse clip path with …
SVG Line Animation for the Uninitiated
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 a situation where I want any other behaviour than screen readers completely ignoring icons (since …
Continue reading “Hiding inline SVG icons from screen readers”