<div class="main-circle">
  <div class="green-circle">
    <div class="brown-circle">
      
    </div>
  </div>
</div>
.main-circle {
  width: 150px;
  height: 150px;
  border:4px solid blue;
  border-top: 4px solid transparent  ;
    border-right:4px solid transparent;
  position:relative;
  border-radius:50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-circle:before {
  width: 100%;
  height: 100%;
  position:absolute;
  content:'';
  border:4px solid transparent;
  border-right:4px solid blue;
  transform: rotate(40deg);
  border-radius:50%;
}
.green-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border:4px solid green;
    border-top:4px solid transparent;
  border-right:4px solid transparent;
  transform: rotate(-20deg);
  border-radius:50%;
  position:relative;
}
.green-circle:before {
  content:'';
  width: 100%;
  height: 100%;
  border-radius:50%;
  position:absolute;
  border:4px solid transparent;
    border-right:4px solid green;
  transform: rotate(60deg);
}
.brown-circle {
    width: 80px;
  height: 80px;
  border:4px solid #9e4f4f;
    border-top:4px solid transparent;
  border-right:4px solid transparent;
  transform: rotate(-20deg);
  border-radius:50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.