Illustrated Dan Denney in a circle

SVG Cassette

August 13, 2013

I was really intrigued by this pen and I have been wanting to learn about styling and animating SVGs. So I'm tinkering with this and the goals are to change the appearance of the cassette with CSS and to make the reels spin.

The first issue that I've run into is rotating pieces of the SVG is tricky as the axis is different. Rotating the whole SVG in place is easy. If you hover on the cassette, you'll see what happens with the reels with a basic 360 rotation.

Learned about animatetransform and struggled hacking around to get the right coordinates. Turns out I would have never gotten it right. Ended up recreating the SVG in Illustrator and using the navigator to get the coordinates. Fractions of a pixel, FTW! I tweaked the timing to speed it up and looks like It's still not the exact midpoint.

cassette SVG in Illustrator