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:

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 content--intro">
	<div class="content__inner">
		<!-- ... -->
	</div>
	<div class="shape-wrap">
		<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
			<path 
				d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
				pathdata:id="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z">
			</path>
		</svg>
	</div>
</div><!-- /content--intro -->

<div class="content content--fixed">
	<div class="content__inner">
		<!-- ... -->
	</div>
</div><!-- /content--fixed -->

The SVG path data is morphed using a CSS animation, as both paths contain the same amount of points.

Morphing Page Transition →

Did you know it’s possible to change SVG path data with only a tad of CSS?

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 in CSS by using the (underdocumented) d property. As long at the paths match up (e.g. same type, same amount of points, etc.) you can even sprinkle a transition property on top to get a smooth transition:

<svg viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</svg>
svg path {
  transition: d 0.35s;
}

svg:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

Here’s a working demo:

To animate more complex paths CSS won’t do unfortunately. For those you’ll need something like Greensock’s MorphSVG or the aformentioned flubber.

☝️ Looking for more demos and/or an in-depth look into path data? CSS Tricks has got you covered: The SVG `path` Syntax: An Illustrated Guide

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

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 L1.5,2 Z";
const pentagon = [[0, 0], [1, 1], [3, 1], [2, 0.5], [0, 1]];

const interpolator = interpolate(triangle, pentagon);
interpolator(0); // returns the SVG triangle path string
interpolator(0.5); // returns something halfway between the triangle and the pentagon
interpolator(1); // returns the SVG pentagon path string

To actually animate the SVG path you’ll need to call interpolator yourself on a timed interval, and set the path data to the returned result.

// Animate with a duration of 1250ms
animateOverTime(1250, (progress) => {
    myPathElement.setAttribute("d", interpolator(t));
});

This looks like a great thing to combine with some easing functions 😉

flubber (GitHub) →

☝️ animateOverTime above is a custom function I quickly throw together. It allows one to perform a callback during a given period of time. Underneath the hood it’s powered by requestAnimationFrame.

See the Pen Timed requestAnimationFrame by Bramus (@bramus) on CodePen.

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 blend modes →
Cutting out the inner part of an element using clip-path

Hiding inline SVG icons from screen readers

accessibilit-a11y

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 they are all accompanied by text).

After a bit of testing, I found that simply adding aria-hidden="true" to the svg element solves the problem.

Like so:

<svg aria-hidden="true">
	<use xlink:href="icons.svg#icon" />
</svg>

Hiding inline SVG icons from screen readers →

SVG Heat Shimmer Effect

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 →