Recently one of my 1st year students proposed a UI design for her photography tutorial site, and asked for my advice as to how to pull it off. In my opinion, SVG was the best answer; while the student ultimately went another way, I thought that what I came up might still be a useful lesson.
In a previous article I illustrated how to clip corners on rectangular user interface elements to make them appear “futuristic” using CSS. A similar visual trope is to create UI elements as hexagons, shown in the example above. These hexagons are typically deployed as buttons: on hover, the images in the background of the buttons change. Recently, a reader asked how this kind of effect might be achieved with SVG.