Flappy DOM

I made a way to do some really silly stuff in CSS! It’s now possible to do all the CSS-based flag waving you want, and I’m hoping that’s a lot. Download the CSS3D Flag library here, if you so wish.

Why did you do it?

I really love to make technologies do stuff they weren’t designed to do. The weirder the application, the more entertaining. That’s why programming in Flash was so appealing. It started out as little more than a way to stitch vector-based cartoons together, so the idea of coding genuinely interactive things in it felt transgressive and satisfyingly perverse.

There’s a problem with that, though. A system that’s worth hacking needs to be solid enough to build silly things on top of. HTML has been disappointingly fragile for a long time in that regard – to deviate slightly would result in disastrous performance, stability, or both. That meant that not much fun could be had building anything on top of it. Once we add the mobile devices to the mix, the flexibility of the platform shrinks even further.

Bit things have progressed recently. Mobile phones are getting increasingly powerful. The problem is finding a way to leverage the power of the devices: the web browser keeps the programmer at arm’s length from the full capabilities of the device. It’s there, though, so it’s worth designing tests to find out where that power is exposed. My previous canvas-based blur was one (failed) experiment, and this flag is an example of a happy success!

Okay fine, so how did you do it?

Like I said, this experiment is very silly. CSS 3 allows for the rotation of entire elements in 3D space, with or without perspective distortion. Using that, we’re able to swing any DOM element around as though it were a card:

That’s no good if you want to make something look soft and flowing; to do that you need to divide an element into thinner slices and move each one individually. To do that, I take the element we want to wave, and make several copies:


Next, I mask each of the copies so that each one follows on from where the last one left off:


Then, I arrange them in a recursively-nested structure, so that each segment is the child of the segment to the left.


That’s useful because you can bend each segment individually and all of the child-elements are directed along the same path. It’s the same system that’s used in L-systems, Autobaroque 1 and 2, and even way back in Fractal Fingers.


Once that recursive structure is in place, the whole thing needs to be shaded. I’m doing that by using CSS gradients. Each segment of the flag has an angle, and so we can base the brightness of the color for each segment on that angle. I then apply that gradient to all segments, and everything matches up well enough to make the faceted segments appear smooth. Easy!

Why not just use webGL?

Good question. While webGL should be the first line of resort for any visual effects like this, most people are still browsing on devices and browsers* that don’t support it. As long as so many people are locked in browsers that haven’t adopted the industry standards, we will be forced to find workarounds like this. Don’t say I didn’t warn you!

* This includes IE 10 and below as well as all forms of Safari mobile. While Safari mobile can support webGL, Apple have limited the capability to render webGL content to iAds. Here’s hoping it changes soon.