How to Create Wobbly SVG Icons

We see clean, straight lines everywhere in modern web design. Everything is perfectly aligned, sharp, and sterile. But sometimes, you want a design to feel alive, raw, and organic.

I recently experimented with creating hand-drawn, boiling vector illustrations and wobbly icons.

The secret? A combination of SVG filters and a simple CSS stepped animation.

The Secret Sauce: SVG Filters

You don't need to manually draw multiple frames of an icon to make it shake. Instead, we can warp any existing SVG using two SVG filter primitives: <feTurbulence> and <feDisplacementMap>.

Here is the basic filter structure:

Let's break down how this works:

1. feTurbulence: This component generates mathematical Perlin noise. The baseFrequency controls how detailed or wavy the noise is, while seed determines the starting pattern of the noise.
2. feDisplacementMap: This takes the original graphic (SourceGraphic) and shifts its pixels based on the red (R) and green (G) color values of the noise generated in the previous step. The scale attribute controls how dramatic the displacement (wobble) is.

Creating the "Boiling" Effect

If we just apply this filter, our SVG lines will look slightly warped, but they will be static.

To make it look like a hand-drawn animation, we need the wobble to change rapidly, mimicking the jitter of hand-drawn frames. We do this by defining multiple filters with different seed values.

Since each seed produces a completely different noise pattern, toggling between them creates a classic "boiling line" animation.

Let's define three distinct filters with seeds 1, 2, and 3:

Animating it with CSS

Now that we have three filters, we can cycle through them using CSS.

Normally, CSS transitions are smooth. But for a hand-drawn look, we want sudden jumps between our frames. This is where animation-timing-function: steps() comes in.

Here is the CSS class to trigger the wobble:

By using steps(1) in the animation, the browser instantly snaps between filter states rather than smoothly morphing them. This produces the charming, low-framerate boiling line look typical of traditional cell animations.

Why This Matters

In a web filled with identical-looking component libraries, custom micro-interactions stand out.

Adding a wobbly hand-drawn effect to button hovers or decorative icons gives your site personality. It makes the page feel crafted, human, and interactive.

Best of all, since it is powered entirely by SVG filters, it works on any vector icon or text element without needing heavy video files or massive Lottie runtimes.

Quick Mental Model

1. feTurbulence: Generates random organic noise vectors.
2. feDisplacementMap: Warps the SVG paths using that noise.
3. CSS Animation: Cycles the noise seed using stepped transitions to create motion.