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:

<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

CSS-Tricks

Comments

comments

Add a Comment

Your email address will not be published. Required fields are marked *