Get the latest tech news
Simulating hand-drawn motion with SVG filters
A practical guide to implementing the boiling line animation effect using SVG filter primitives and JavaScript - Blog post by Camillo Visini
I recently watched an ARTE documentary about Neapolitan pizza and was fascinated by the animated illustrations (drawn in simple shapes and plain colors) that accompanied the segment where the recipe and its ingredients were presented. There seems to be a layer of a rough paper-like texture with some kind of overlay effect that is applied to the whole scene, giving it a dynamic quality. With just two humble filter primitives and a bit of JavaScript, we’ve turned boring shapes into something that feels alive, simulating the warmth and imperfections found in hand-drawn animation styles.
Or read this on Hacker News