Creating multiple random Circles in SVG - svg

Question

I am trying to create a pattern of multiple circles of different colour and each time created rotated slightly, here is an example of what I am trying to achieve:
http://etc.usf.edu/clipart/42900/42923/circle-29_42923.htm
I have created the svg to create the circle in the correct spacing however I am not sure how to duplicate the circle using SVG, here is a fragment of my code so far:
<title>Multiple Circles</title>
<svg x="100" >
<svg height="500" width="500">
<circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>
</svg>
</svg>

Answer 1

i have just created the design you mention in you link. i have used Javascript to achieve this.
here is fiddle , check it :- http://jsfiddle.net/aBaFf/
Steps:-
1) First i created a 'Main Circle' , around which i am going to create Rings of Circle.
2) I use 'Path' to create Circle. reason is to find exact points on the circular path.
3) i start created circle on that points i found out in Step 2.
check the below code:-
HTML Code:-
<svg id="mainSvg" width="1000" height="600">
<path id="smallCircle" fill="none" stroke="red"
d="
M 200, 200
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"
/>
<path id="LargeCircle" fill="none" stroke="green"
d="
M 500, 200
m -150, 0
a 150,150 0 1,0 300,0
a 150,150 0 1,0 -300,0
"
/>
</svg>
JavaScript Code:-
function path2Array (path) {
var pointsArray = new Array();
for (var i = 0; i < path.getTotalLength(); i++) {
var point = path.getPointAtLength(i);
var cordinatesXY = {
x: point.x,
y: point.y
}
pointsArray.push(cordinatesXY);
}
return pointsArray;
};
var mainSvg=document.getElementById('mainSvg');
function createCircleRing(radius,gape,parent){
var mainCircle=document.getElementById(parent);
var points=path2Array(mainCircle);
var counter=0;
var circle;
for(var point in points){
counter++;
if(counter%gape===0){
point=points[point];
circle=document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", point.x);
circle.setAttribute("cy", point.y);
circle.setAttribute("r", radius);
circle.setAttribute("fill", "none");
circle.setAttribute("stroke", "black");
mainSvg.appendChild(circle);
}
}
}
createCircleRing(10,5,'smallCircle');
createCircleRing(50,10,'LargeCircle');

Answer 2

If I wanted to reproduce this picture quickly, here is how I would do it.
<svg height="500" width="500" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(250,250)" stroke="black" stroke-width="3" fill="none">
<circle r="200" />
<circle id="c1" cy="130" r="70"/>
<use xlink:href="#c1" transform="rotate(15)"/>
<use xlink:href="#c1" transform="rotate(30)"/>
<use xlink:href="#c1" transform="rotate(45)"/>
<use xlink:href="#c1" transform="rotate(60)"/>
<use xlink:href="#c1" transform="rotate(75)"/>
<use xlink:href="#c1" transform="rotate(90)"/>
<use xlink:href="#c1" transform="rotate(105)"/>
<use xlink:href="#c1" transform="rotate(120)"/>
<use xlink:href="#c1" transform="rotate(135)"/>
<use xlink:href="#c1" transform="rotate(150)"/>
<use xlink:href="#c1" transform="rotate(165)"/>
<use xlink:href="#c1" transform="rotate(180)"/>
<use xlink:href="#c1" transform="rotate(195)"/>
<use xlink:href="#c1" transform="rotate(210)"/>
<use xlink:href="#c1" transform="rotate(225)"/>
<use xlink:href="#c1" transform="rotate(240)"/>
<use xlink:href="#c1" transform="rotate(255)"/>
<use xlink:href="#c1" transform="rotate(270)"/>
<use xlink:href="#c1" transform="rotate(285)"/>
<use xlink:href="#c1" transform="rotate(300)"/>
<use xlink:href="#c1" transform="rotate(315)"/>
<use xlink:href="#c1" transform="rotate(330)"/>
<use xlink:href="#c1" transform="rotate(345)"/>
</g>
</svg>
Fiddle here