How do I stack circles in css?

Question

Hi I want to make a simple chart (circle of fifths) using css and I can't figure out how to stack circles so they have same midpoint but different radius.

I've tried the following code but the circles have same starting point instead of midpoint.

.container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
}

.circle:first-child {
  width: 50px;
  height: 50px;
}

.circle:nth-child(2) {
  width: 80px;
  height: 80px;
}

.circle:nth-child(3) {
  width: 110px;
  height: 110px;
}

.circle:nth-child(4) {
  width: 140px;
  height: 140px;
}

.circle:last-child {
  width: 170px;
  height: 170px;
}

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

I am getting circles with common starting point but I need them stacked with common center.

demo: https://jsfiddle.net/60mud4ga/1/

It appears that you're attempting to create a diagram. You're probably better of using SVG to create an image of the diagram and then either embedding that SVG directly in the page as markup, or referencing it via an `` element. Using CSS to draw is like a Rube Goldberg machine, it takes a lot of set up and _can_ be done, but--generally speaking--isn't practical. — zzzzBov, Oct 07 '19 at 15:21
You can use transform: translate(x,y) on each of the circles. Since you are hardcoding the initial sizes of the circles anyway (as opposed to dynamically calculating them), just hard code the x, y offsets. https://jsfiddle.net/w82Lnatg/ — zombiedoctor, Oct 07 '19 at 15:49

score 1 · Answer 1 · answered Oct 07 '19 at 15:23

One way would be to translate all the circle divs by -50% via transform: translateX(-50%) translateY(-50%);:

.container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}

.circle:first-child {
  width: 50px;
  height: 50px;
}

.circle:nth-child(2) {
  width: 80px;
  height: 80px;
}

.circle:nth-child(3) {
  width: 110px;
  height: 110px;
}

.circle:nth-child(4) {
  width: 140px;
  height: 140px;
}

.circle:last-child {
  width: 170px;
  height: 170px;
}

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

`translateX(-50%) translateY(-50%);` is equal to `translate(-50%, -50%);`. — connexo, Oct 07 '19 at 15:43

How do I stack circles in css?

1 Answers1