Pose Animator – Animate SVG Illustrations using your Camera

This is crazy:

Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.

Built on top of PoseNet to track the body’s pose, and the aforementioned FaceMesh to track the face.

Pose Animator →
Pose Animator Demos →

Creating a Pencil Effect in SVG

Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings:

See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen.

Creating a Pencil Effect in SVG →

💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat shimmer effect with SVG

Using an Emoji as a Favicon

Great “hack” popularized by Lea Verou (but first discovered by Leandro): if you place an emoji inside <text> in an SVG Favicon you instantly have an Emoji Favicon 🙂

Beware of potential clipping on various platforms though, as emoji differ per platform.

SVG Properties and CSS

There’s a good deep dive into SVG Properties and CSS on CSS-Tricks:

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

Also covers the fact that you can alter SVG (simple) path data using CSS 🙂

SVG Properties and CSS →

SVG Line Animation with Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

Think SVG line animations, but then controlled through JavaScript.

vivus.js – svg animation →

SVG favicons in Chrome

A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉

🦊 Firefox already has support for SVG favicons, ever since version 41

Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME Type – As per tip by Mathias

Above that it’s also possible to use prefers-color-scheme in your SVG icon, thus supporting Light/Dark Mode:

🐛 There’s on small bug though: you need to refresh the page after changing to/from Dark Mode for the favicon to change.

Dark Mode Favicon Demo →

Easily use SVG files in React Native with react-native-svg-transformer

React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components.

This makes it possible to use the same code for React Native and Web.

Oh, that’s a welcome package!

import Logo from "./logo.svg";

<Logo width={120} height={40} />

After installing the package you will need to adjust your Metro configuration:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

react-native-svg-transformer (GitHub) →

Accessible Icon Buttons

Sara Soueidan:

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.

Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.

Sara gives us 5 techniques to solving this.

Accessible Icon Buttons →

Making Future Interfaces: Inline SVG

Another great entry in the “Making Future Interfaces” video series by Heydon Pickering. This one here is a basic introduction to SVG.

Like with his other videos: even if you already know about the topic he’s talking about: just watch it, the presentation style and puns are great 🙂

Related: Here’s a post of mine on how to alter SVG path data on hover, something that is mentioned in the video.

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 your eye on the swoopy curves just above the post text as you scroll through the top of the document. Notice how they become flat as they approach the header at the top of the viewport?

In a delightful bit of serendipity, I realized while building the blog that this feature would make a great first blog post!

Love the interactive examples embedded into the post. They really help convey the message.

Dynamic Bézier Curves →