Experimenting with animating SVG

Hi everyone! I have decided to blog :O Recently I have been having a lot of fun animating with CSS3.

It’s quite a challenge compared to JavaScript because there’s more work involved with browser compatibility (but Windows has ditched support IE 9-11 now, WOOHOO!) and you can’t just pick up a framework like GSAP (though I am starting to see more CSS frameworks but they’re mostly grid systems).

Playground Pipes project

Near the end of last year the company I work for, TheTin, were working on revamping the website which I got to get involved with. The Front-End Web Devs (there’s two of us :P) really wanted to show off what we can do by showcasing experimental code, kinda like Codepen. We decided to call it the Playground and I got to create the first playground project! I really wanted to animate an awesome illustration created by one of our designers (see image above). You can read about the project on the website and I have my little section talking about the technology including a segment on LESS code. I had a lot of fun with this and even added a little easter egg that was kept a secret from everyone at work haha.

Click here to see the experiment full screen. I would really love your feedback. Is it intuitive and easy to use? What do you think?

In other news, I am still working on my Secret Santa gifts. For some reason, I take forever to make desktop wallpapers T_T But they are so fun to make so I have decided to add this as a new category of designs available on Vizune. There’s only two at the moment… but I am planning on increasing that number that in the next couple of months.

At the end of the month I will be going on holiday to Netherlands! So excited~ Don’t worry, I won’t be gone for too long I’m only going there for a weekend but I will definitely take photos and share 🙂

Crunchyroll backpack

I bought the Crunchyroll Mystery Backpack during Cyber Week. I really wanted the Ryu (from Street Fighter) plush in the Gaming bundle but I could tell that was a mega-man and sonic silhouette which I didn’t really care for. I picked the Kill la Kill bundle but a while later noticed a Classroom Assassination bundle and was gutted I didn’t get that! I have added a photo above of my backpack/goodies, I got a Mako plush, keychain of Guts the dog and a wristband with the logo. I’m now using my backpack for work ^^ I’m quite tempted to get the Anime Loot Crate, I’ll have a think on it.

Until next time… see ya! ^^


2 thoughts on “Experimenting with animating SVG

  1. OMG HOWEVER YOU MADE THAT PLAYGROUND THING, IT IS AMAZING! i was so caught up hovering and clicking and be amazed in every click! *salute*
    i like how light and easy it is although i’m sure the work behind it is not light at all! kekeke~~ and the Mako plush is so cute!

  2. I saw this when you released it before! :O I believe via twitter? It’s so fun! I love the idea of CSS animations, but it seems so complex and difficult to grasp (though I haven’t really looked much into it…). But great job it’s super fun! 🙂

    I’ve been trying to work on desktop wallpapers too but I have no idea what style to go after, what image to choose etc. It’s so hard finding images to work with now *sigh. Especially in the anime community, I find the image resources are very limited and repetitive now. It is just me?

    I haven’t actually watched kill la kill.. I heard good things about it but when I tried to watch the first few episodes it didn’t capture me. It feels too “Americanized” for anime or something. Haha maybe I should try it again (it’ll be my third attempt t watch it).

    Have fun in the Netherlands! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *