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.