HTML/CSS Target Faces


In a spirit of sharing, I've made a set of pure CSS archery target faces available for public consumption. The markup and CSS is available on github, and can be previewed here.

Markup is limited to a bunch of nested divs using corner radius of 50% to generate the circles. Spacing is determined by padding, itself based on the dimension of the outermost 'ring'.

The css is generated with SASS where the use of a few variables makes it easy to scale the faces to any size. Javascript could also be used to drive the scale.

I put these together for my own 'exploration' more than anything else - trying to do away with images, canvases etc, and am pretty pleased with them, although I'm sure there can be many improvements.

I've tried to get them as accurate as possible but there are a couple of minor omissions, namely the centre spiders, and colour accuracy of the NFAA indoor target is probably off. The WA target faces use the Pantone > hex equivalent colours as specified in their technical documentation.

Its a work in progress, but feel free to fork the repo etc, use for your own purposes (I'll probably put an MIT type license on it when I can be bothered)...



These are for digital use - no consideration has been made for print. I should have made that clearer, I guess...

Target faces are typically rendered on websites, in applications etc using either static images or constructed programatically on some kind of canvas. Both approaches have their pros and cons but I wanted to explore using 'native' technologies in the context of website/web applications. Using HTML markup and CSS was an obvious step, and I couldn't find any prior art in the public domain anywhere.

All that said, these are just pixels so given the correct dimensions and known output sizes, it would be trivial to scale them to the required size for printing.


Beautiful hand coding, so much neater than the automatic bloat ware that we see almost everywhere else.