How one can develop UI as given in the pic? What components can be used to achieve the design given in the pic? It looks like geometric shapes… Ideas and suggestions are welcomed 
@leob, @owndmorix, @bengtler
You can do a lot with pure CSS, but I think with the shapes above it will get too complicated.
I think I’d go either for HTML5 Canvas (with a few commands you can draw the shapes above), or you could use SVG, see this post:
http://graphicdesign.stackexchange.com/a/24629
The challenge then would be to know which shape was clicked. If you use canvas then it seems possible to get the color of the pixel that was clicked:
http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover
The embedded images/logos (icons) could just be clickable images themselves so you got that covered as well.
But maybe there is a much easier way to pull this off that I don’t know about.
1 Like
i would follow @leob advice and try to build the shapes with html5 canvas. but keep in mind you have to draw them dependent on the screen size
Good point, so yes you need to scale the drawings to the viewport. And then I think you can use the HTML5 Canvas “isPointInPath” method to find out which polygon you clicked:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath
It might help if you look for existing “Voronoi Canvas example” as this is the name of algorithm used for these shapes
2 Likes