//the following code creates an instance of a ‘Bullseye’

function makeTarget(evt) {
// place new target in random position
centreX = Math.random() * 550;
centreY = Math.random() * 400
//creat outer circle
radius = 38;
colour = "fill:blue";
makeCircle(evt);
//create middle circle
radius = 25;
colour = "fill:white";
makeCircle(evt);
//create bull
radius = 14;
colour = "fill:red";
makeCircle(evt);
}

function makeCircle(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", centreX);
shape.setAttributeNS(null, "cy", centreY);
shape.setAttributeNS(null, "r", radius);
shape.setAttributeNS(null, "style", colour);
svgDocument.documentElement.appendChild(shape);
}
//the following code calls the above code
]]></script>
<defs>
<g id = "instructions"
<text x="275px" y="383px" text-anchor="middle" style="fill:rgb(0,0,0);font-size:16; font-weight:bold;font-family:Times New Roman">Click the rectangle repeatedly to create multiple instances of a ‘Bullseye’</text>
<text x="275px" y="23px" text-anchor="middle" style="fill:rgb(0,0,0);font-size:18; font-weight:bold;font-family:Times New Roman">Create Object by manipulating the DOM</text>
</g>

<g id = "clickableRectangle" onmousedown="makeTarget(evt)">
<a xlink:href="">
<!—create a light gray rectangle over the whole viewbox on which to clickà
<rect x="0" y="0" width="100%" height="100%" style="fill:rgb(0,0,0)" opacity ="0.1" />
</a>
</g>
</defs>
<use xlink:href="instructions"/>
<use xlink:href="clickableRectangle"/>
</svg>