I've just finished my new experiment. I really wanted to try out the squiggly filter. And recently I saw a geometrical thing on a T-shirt which became the basis for the resulting work.

One annoying thing I noticed is how the <animate /> tag is implemented in the browsers. If it has the fill attribute set to freeze, the moment you append it to the DOM, the animated element takes the final state of the animation, not the initial one. For example, you want to animate the scaling of an element from 0 to something. For a brief moment, after you append the <animate /> tag and call beginElement on the animation, the element is rendered in its final state. I'm not sure what the thought process was here. Why would I want a new animation to be finished instead of not yet started?

I needed to animate an element both ways and I had to mitigate this fuckery twice. The first time, I made the animated element transparent, so for the brief moment it appears in its final state, it's simply not visible. And it was the actual initial state of the animation. The second time it had to be visible. And only thanks to the context of the whole thing could I simply create a cover element which hid the disappearing element for a brief moment. The cover element gets removed after 50 milliseconds. This whole thing feels silly and hacky.

Otherwise, I'm once again amazed by the power of SVG. Amazing stuff.