Skip to main content

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!

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

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes (currently on maternity leave), Acting Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.