Portfolio site, Part 5: SVGs, icon sets, and gifs

This is a quick one. I finish animating my splash page, make my firstgif and create an icon set. Hoo rah. Go to morganintrator.com and see the work in progress!

Rotating in a web animation

Setting the needle on my turntable involves a rotation of ~20 degrees. Here’s the tutorial I used to do it. Here’s the CSS that sets the new transform origin point:

needle { transform-origin: 85% 23%; transform: rotate(-35deg); left: 4000px; background-image: url(/images/needle.svg); }

Gif

Afterthe album from my splash page lands on the turntable and starts spinning, I use polymer’s hero transition to move the whole collection to the navbar, where I’d like the album to spin in perpetuity.

album-and-turntable

I decided a gif would be simple enough for the navbar.This tutorial helped me do that, with just two frames for the album at 0 degrees and 180 degrees.

SVG Icons

Then, I went to work substituting my own icons for the ones in the original Topeka app. Lookat category-icons.html. They’re all there as a string of SVGs. I don’t even know what an SVG is, nor have I ever created one, but there are giveaways:

So, here’s a tutorial I used to create my own svgs.Add some id tags and then you’ve got your icon set. Here’s mine.

That’s it.

-Morgan Intrator