« Blog

SVG jQuery darts board interface

Open interface

My brother recently needed a darts board interface that someone could click on.

Now, everyone who's tried using absolute positioning of multiple divs to create some kind of graphical interface knows, its a total nightmare! But one thing I did know, is that making a darts board in Illustrator isn't much different from creating a pie chart : )

I'd also just read a great article by Chris Coyier about using SVG's, but what had really caught my attention at the time of reading was the fact that you could select different paths using jQuery - which was exactly what I wanted! I could do away with rectangular divs with png background images - really important for registering where the user clicked the mouse.

And the best bit of anything Gareth needs doing, it only ever has to work in Chrome! I knocked up the darts board pretty quickly, then named every single layer in Illustrator super neatly and accurately. Check out the finished product here: