Daylight

blog

Squigglevision

Category: Article

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.

Updates

David learned from Lucas Bebber:

Also many people pointed out it doesn’t work in Firefox. I’m not even fully sure what the situation is there. As in, what part Firefox trips up on? The CSS filter() itself? The fact that the filter is defined in inline SVG? What the filter is being applied to? The particular type of filter? Combining tech like this is confusing.

Squigglevision is a post from CSS-Tricks

LEAVE A REPLY

Recent Posts

Recent Comments

    Archives

    Categories