As part of a recent internal project, we needed to craft a visual progress meter for all to reference. Being fans of pizza, we created a pizza chart display our current status in relation to our goal. As we get closer to the goal, more pizza disappears, until the pizza is all gone.
The page requests some JSON from the server every ten seconds, updates the numbers, and redraws the pizza. To dynamically represent the amount of pizza left, an SVG clipping path is drawn, revealing more of the cardboard image underneath.
This became a great opportunity to experiment and have fun. We used TypeKit to serve up Cooper Black, Zepto.js for DOM manipulation, and then constructed the SVG path string dynamically for each redraw. When the goal is reached, the DOM is scraped and a victory screen is displayed, featuring a Street Fighter, animated rainbow gifs, and a MIDI audio file.
In the end this was an entertaining and small project for tracking our progress. Ben has nice overview about it on the MailChimp Blog.
