Using pure AngularJS + SVG to create the Resin.io logo

Our graphics designer is hard at work making the Resin.io logo and we've converged on a cube-in-cube logo that looks like a hexagon. But I wanted an easy way of playing with the ratios and colours, and photoshop was just too complex for this sort of thing. So I thought I could replicate the logo in SVG and use Angular to parameterise it, using the technique I discussed in my previous post It actually worked out even better than I expected:

You can see the code by clicking the coresponding button at the top right. A lot of the code is about having the interactive JSON object at the bottom which I found useful so team members could 'store' and exchange their favourite logo configurations, and also quite a bit of the code is going towards the colourpicker which I'm not terribly happy with.

That said, it's all 150 lines and was done over a couple of hours.

If anyone wants to recreate this in D3.js, I would really love to see that code. I am not implying that it will be bad code, I just can't even begin to think how to do something like that. And to a large extent, that's the benefit of the Angular+SVG technique: It's building blocks are much more intuitive, at the very least to me.

Alexandros Marinos

I love to take the web to new places. Currently working on resin.io to bring web programming in contact with the physical world, so you can 'git push' JS to your devices.

comments powered by Disqus