Playing with SVG and Animations

I've been needing to get my hands dirty in another coding project. I've got my blog _mostly_ working using BitBucket + WebHooks + Brid.gy, so I wanted to add something to my site. Delighters are a wonderful thing, just nice little whatsits that make you go "Ooo!" that can add something to a site. A steampunk site (allegedly) really needs delighters.

Having no graphical skill whatsoever, I naturally decided to play with SVG and Animation.

First I started playing with CSS3 animations. I had a nice little start to a Centrifugal Governer in animations:

But I was drawing a blank at linking things together, the arm and the spheres, and only moving the x1,y1 value of the arm to keep it in line with the spheres. CSS animations locked me to skews, translates, scales and CSS attribute animations. Was I able to animate the x1/y1 attributes?

So then I kept digging and found the built in animation tag for SVG. It had things like linking animations together and triggering from each other. And the ability to animate attributes like x1, y1! Great!

Reading further. Find out it's deprecated (was deprecated, then reverted, but still on the way out). Time to try with Skew then.

Using degrees on one side of the animation and pixel translations of the other? That's not going to work without a lot of math. So, let's throw in the towel. Maybe 3d animations is the go? I am trying to do things in 3d after all.

Plus further reading shows that 3d transforms aren't supported in SVG elements.

Poop.

Welp, maybe I can animate individual SVG components in 3d space? A quick look revealed no. So. If I can't animate within the SVG, if I make each part their own DIV, can I target the divs and animate the SVG inside?

Then, the brain woke up. Probably because it was late and the rest of me was asleep. I don't need to rotate the spheres the whole 360. Just half way, because the spheres are identical we just repeat the half-animation and it looks like a full rotation. Hoy. Animating just the x2 axis... I'm stuck with using SVG animation for now. In the future I might find another way. And if I make the lines into a Poly and animate the path of that. Well. That's cut down a lot of transitions.

However I'm now using two different animation methods and they get out of sync. Animate doesn't start until the page is loaded, but the CSS kicks off right away. And if you're wondering why I didn't just rotateZ the polygon, it's a 2-d image so it would flatten as it spun. Unfortunate, but there you go.

So this is what I have now. What do I do? Do I move the spheres to the <animate> attribute and see if I can fake the 3d rotate again? Maybe. But the experiment path led me to the conclusion I cannot use raw CSS animations for moving just one arm of a line/ poly SVG shape. I'd have to go to a library that can do all the calculations for me.

Or, I can go back to my first thoughts and add in the cheats.

So yes it's all animate now and... it's not bad. For a delighter, which is just there to be fun... this is acceptable to me.

Where I looked