Squigglevision

It's a term for animation where the lines appear to squirm around, even when the object/scene is at rest. Apparently, it's even patented. It's part of the iconic look of shows like Dr. Katz:

And Home Movies:

Apparently the animation style is "fast and easy" to produce, although it does require multiple drawings:

In order to create the line oscillation effects that characterize Squigglevision, Tom Snyder Productions' animators loop five slightly different drawings in a sequence called a flic.

David Khourshid's "Alex the CSS Husky"

This is one of my favorite Pens recently:

See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.

So dang adorable. And squigglevision! David figured out an exceptionally clever way to achieve this effect:

Rapidly iterated SVG turbulence filters

SVG has a turbulence filter. There's plenty of attributes you can fiddle around with that affect it in differnet ways. Here's a simple setup:

You can apply that to SVG elements, but also any HTML element!

.filter {

  filter: url("#turb");

}

It messes things up pretty good:

See the Pen yedVop by Chris Coyier (@chriscoyier) on CodePen.

The trick is to use just a smidge, make several different ones, then animate between them.

Here's five different turbulence filters, all slightly different from each other, with differnet ID's:

And a CSS keyframes animation to animate between them:

@keyframes squigglevision {

  0% {

    filter: url("#turbulence-1");

  }

  25% {

    filter: url("#turbulence-2");

  }

  50% {

    filter: url("#turbulence-3");

  }

  75% {

    filter: url("#turbulence-4");

  }

  100% {

    filter: url("#turbulence-5");

  }

}

Which you call on anything you wanna squiggle:

.squiggle {

  animation: squigglevision 0.4s infinite alternate;

}

Like this:

See the Pen Squiggle Vision by Chris Coyier (@chriscoyier) on CodePen.

That's pretty much exactly what's happening with Alex the CSS Husky, only the filters are even more chill.

---

Squigglevision is a post from CSS-Tricks