Neutral Magazine experiments with triangle-based navigation

Neutral Magazine is built by Plump Digital. “Our creative director laid down the challenge of creating a triangle-based article index, so we needed to work out how we could break out of the standard rectangle-based HTML/CSS,” says technical director James Howard.

SVG was the answer. “We used MooTools for animations, Ajax and DOM manipulation,” Howard adds, “combined with Modernizr for detecting browser support for SVG and touch. Where there is SVG support, the page HTML is converted into SVG elements, giving us freedom to clip and mask into triangles. Working with SVG elements meant getting back to using core JavaScript and creating elements within the SVG namespace.”

Finally, Plump used the HTML5 History API to track users’ progress through the site: “Articles are loaded over Ajax so we made use of the History API to update the URL in the browser, allowing deep links to articles be shared or bookmarked.”

Liked this? Read these!

• Create a portfolio website using Behance ProSite
• Great examples of doodle art
• Brilliant Wordpress tutorial selection

Have you seen any inspirational examples of web design recently? Let us know in the comments!