Simulating Hand-Drawn Motion with SVG Filters

Summary

Ever wondered how cartoons create that hand-drawn “jitter” effect? 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. The illustrations were static, but they had a subtle animation effect that made them look like they were moving slightly. See for example in this short clip, where you can see the ingredients being presented (pay attention to the edges of the shapes): Animated illustration of ingredients for Pizza Napoli - Source: ARTE I was curious to find out how this effect might have been achieved. First, I had to find out what it was called – turns out that this specific effect is actually quite common in cartoon-style animations and illustrations. After some research, I found out that this effect is called “boiling” or line boil and was traditionally achieved by drawing the same frame multiple times in a row, with slight variations in position and rotation. This creates the illusion of movement in an otherwise static scene. The technique is often used in animation to create a more dynamic and engaging visual experience (instead of just a static image or scene, for example when a character is standing still). Let’s take a look at a simple example of this effect in the demo below. I have traced the same object multiple times. Naturally, as these drawings are tracings by hand and not perfect copies, there are subtle differences between them. But, this becomes only apparent when the drawings are overlaid and animated! When looking closely at the initial short clip, you will notice that the effect is more of a trick. 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. That’s not the part we will focus on, though. More interestingly, the edges of the shapes seem to wobble slightly and a...