Monday, February 22, 2016


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

No comments:

Post a Comment