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)...
Cheers
Tim
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)...
Cheers
Tim