Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

SVG Target Faces

SVG renderings of typical archery target faces, such as WA 10-zone, 6-zone, triple spot, NFAA 5-zone and AGB Worcester faces.

See the examples here:


Please see index.html source code for details.

Example for a 6-zone WA target face:

<svg id="svg_wa_6_zone" xmlns="" xmlns:xlink="" height="100%" width="100%" viewBox="0 0 600 600">

    <!-- 5-RING -->
    <circle cx="300" cy="300" r="239" fill="#00B4E4"/>

    <!-- 6-RING -->
    <circle cx="300" cy="300" r="199" fill="#00B4E4" stroke="#000000" stroke-width="1"/>

    <!-- 7-RING -->
    <circle cx="300" cy="300" r="159" fill="#FD1B14" stroke="#000000" stroke-width="1"/>

    <!-- 8-RING -->
    <circle cx="300" cy="300" r="119" fill="#FD1B14" stroke="#000000" stroke-width="1"/>

    <!-- 9-RING -->
    <circle cx="300" cy="300" r="79" fill="#FFE552" stroke="#000000" stroke-width="1"/>

    <!-- 10-RING -->
    <circle cx="300" cy="300" r="39" fill="#FFE552" stroke="#000000" stroke-width="1"/>

    <!-- INNER 10-RING -->
    <circle cx="300" cy="300" r="19" fill="#FFE552" stroke="#000000" stroke-width="1"/>

    <g class="spider">
      <line x1="295" y1="300" x2="305" y2="300" stroke="#000000" stroke-width="1"/>
      <line x1="300" y1="295" x2="300" y2="305" stroke="#000000" stroke-width="1"/>

And, of course, SVG can be styled via CSS using appropriate selectors:

// General 'ring' with black outline
g circle {
  stroke: #000000;
  stroke-width: 1;

// A blue ring, inherits the black outline above
g circle.wa_blue {
  fill: #00B4E4;

// Same for a red ring
g circle.wa_red {
  fill: #FD1B14;


SVG Target Faces published under MIT License

You can’t perform that action at this time.