Wobbly windows

[Zbigniew Braniecki]

Hi all.

I'm wondering about creating something like a Wobbly Windows effect in
Luminocity ([1]).

The main question is - what object should I use? A path? I think so, but
the effect seems to be terribly slow, possibly because I'm just
overwriting path atribute "d" in every step with:

function step() {
r = "c 0 -80 "+v+" -140 "+v+" -200";
l = "c 0 40 "+(v*-1)+" 100 "+(v*-1)+" 200";
fb.setAttribute('d',point+' '+l+' '+b+' '+r+' '+t);
}

And it's not too fast :(

Any suggestions?

Another question, anyone knows the math formula for such a thing? I'm
doing it by myself right now, but I'm pretty sure there are ready things
for this, just searching google isn't easy because I have a problem how
to name this effect.

Greetings
Zbigniew Braniecki

[1] http://www.gnome.org/~seth/blog/xshots - Wobbly Windows is the idea
of drag&drop effect when the window is dancing on every move basing on
different delays of following the mouse of every layer corner.

[Jeff Schiller]

You're not going to be able to exactly duplicate that effect in SVG
since it requires non-affine transformations (i.e. warping) of the
entire content of the windows and this isn't supported in SVG. This is
really a 3D effect, not a 2D one.

The best you could do with transformations is to use skew, I'd guess.

<g id="myWindow"> ... window contents here ...</g>

Then when the mouse moves the window, apply transform="skew(...)"
appropriately. Post a link if you get anywhere with this, as I'd be
curious to see what it looks like.