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
