<div class="box6"></div>
<div class="box5"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="test1"></div>
<div class="box"></div>
<div class="box2"></div>

div {
  margin: 5px 0 0;
}
.test1 {
  height: 170px;
  width: 170px;
  background: conic-gradient(teal, teal) center / 10px 10px no-repeat,
    conic-gradient(black, black) center / 20px 20px no-repeat,
    conic-gradient(orange, orange) center / 30px 30px no-repeat,
    conic-gradient(black, black) center / 40px 40px no-repeat,
    conic-gradient(teal, teal) center / 50px 50px no-repeat,
    conic-gradient(black, black) center / 60px 60px no-repeat,
    conic-gradient(orange, orange) center / 70px 70px no-repeat,
    conic-gradient(black, black) center / 80px 80px no-repeat,
    conic-gradient(teal, teal) center / 90px 90px no-repeat,
    conic-gradient(black, black) center / 100px 100px no-repeat,
    conic-gradient(orange, orange) center / 110px 110px no-repeat,
    conic-gradient(black, black) center / 120px 120px no-repeat,
    conic-gradient(teal, teal) center / 130px 130px no-repeat,
    conic-gradient(black, black) center / 140px 140px no-repeat,
    conic-gradient(orange, orange) center / 150px 150px no-repeat,
    conic-gradient(black, black) center / 160px 160px no-repeat,
    conic-gradient(teal, teal) center / 170px 170px no-repeat;
  background-repeat: no-repeat;
}

.box {
  width: 170px;
  height: 170px;
  box-shadow: inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
    inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
    inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
    inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
    inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}

.box2 {
  width: 0px;
  margin: 90px 0 0 85px;
  box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
    0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
    0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
    0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
    0 0 0 80px black, 0 0 0 85px teal;
}

.box3 {
  width: 170px;
  height: 170px;
  background: repeating-linear-gradient(
    to left top,
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
}

.box4 {
  width: 170px;
  height: 170px;
  background: repeating-radial-gradient(blue, red 33.3%) 50% 50% / 20px 20px;
}
.box5 {
  width: 170px;
  height: 170px;
  background: repeating-radial-gradient(
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
}
.box6,
.box6:before {
  width: 170px;
  height: 170px;
  display: block;
  background: #000;
}
.box6:before {
  content: "";
  background: repeating-radial-gradient(
    teal 0 5px,
    black 5px 10px,
    orange 10px 15px,
    black 15px 20px
  );
  border-radius: 50%;
}