# Calculate x y positions SVG circle elements

Hi

Im trying to create the attached diagram using SVG

For the outer circle (made of 27 circles), does anyone know an algorithm that could calculate the x and Y positions of each circle . Each circle has a radius of 70

Thanks
map.png
###### Who is Participating?

Braces MediaCommented:
There is option to calculate the position :

``````var pos = \$("#myimage").position(); // returns an object with the attribute top and left
pos.top;  // top offset position
pos.left; // left offset position
``````
0

AnalystCommented:
Your question is interesting. I would like to know also.

By the way, the algorithm will also depend on the length of the string the circle is attached to. Do you have any specific length of the string? Or the string is irrelevant as long as the circles are adjacent to one another?
0

Author Commented:
What do you mean by the length of the string?

yeah the circles should just be adjacent to one another to form 1 big circle. ( similar to attached graphic)
My circles have a radius of 70 pixels

Thanks
0

Author Commented:
Does that not just calculate positions?

If i have 27 circles of 70 pixels radius how can i find out the x and y posittins for each circle to form one big circle (like graphic attached)?

Cheers
0

AnalystCommented:
I am stupid in giving exact answer for math questions.

But you need to to have a starting point.
The circumference of the big circle that is formed by small ones:
BC(circumference) = sum(of all SC[diameter])

element=0
maxelement =27
Loop until element > maxElement
SC(element).position = touching the d radian(BC)
Element = element +1
d = d + radian of SC
Loop

Just an idea.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.