Webmasters Gallery

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:

<svg display="none">
  <defs>
    <filter id="turb">
      <feTurbulence baseFrequency="0.3" numOctaves="2" />
      <feDisplacementMap in="SourceGraphic" scale="20" />
    </filter>
  </defs>
</svg>

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:

<svg display="none">

  <filter id="turbulence-1">
    <feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-2">
    <feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-3">
    <feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-4">
    <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-5">
    <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

</svg>

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