circles on circle

by Andres Abadia

HTML

<div class="b-circle">  
  <div class="axis d-90">
    <div class="s-circle">
      <span class="d-90">Hello</span>
    </div>
  </div>
  <div class="axis d-135">
    <div class="s-circle">
      <span class="d-135">Hello</span>
    </div>
  </div>
  <div class="axis d-180">
    <div class="s-circle">
      <span class="d-180">Hello</span>
    </div>
  </div>
  <h1>Hello</h1>
</div>

CSS

.b-circle {
  width: 100vw;
  height: 100vw;
  border-radius: 50%;
  border: 1px solid black;
  position: relative;
  transform: translate(-20vh, -20vh);
}
h1{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}


.s-circle {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: white;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.axis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.axis.d-45 {
  transform: rotate(45deg);
}

span.d-45 {
  transform: rotate(-45deg);
}

.axis.d-90 {
  transform: rotate(90deg);
}

span.d-90 {
  transform: rotate(-90deg);
}

.axis.d-135 {
  transform: rotate(135deg);
}

span.d-135 {
  transform: rotate(-135deg);
}

.axis.d-180 {
  transform: rotate(180deg);
}

span.d-180 {
  transform: rotate(-180deg);
}