Calculate x y positions SVG circle elements


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

Who is Participating?
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
There is option to calculate the position :

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

Open in new window

Ronnel dela LuzAnalystCommented:
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?
coolispaulAuthor 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

coolispaulAuthor 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)?

Ronnel dela LuzAnalystCommented:
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])

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

Just an idea.
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.

All Courses

From novice to tech pro — start learning today.