<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

:root {
  --unit: 1vmax; /* change size min=1 max=2 */
  --clr1: #795548; /* change color 1 */
  --clr2: #ff9800; /* change color 2 */
  --hue: hue-rotate(10deg); /* change color hue */
}

body {
  filter: var(--hue);
  background: #222222;
  display: flex;
  align-items: center;
  height: 122.22vh;
  width: 122.22vw;
  overflow: hidden;
  margin: 0;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  margin-left: -8vw;
  margin-top: -8vh;
}

div {
  width: calc(var(--unit) * 11.11);
  height: calc(var(--unit) * 11.11);
  background: radial-gradient(
      circle at 35% 65%,
      var(--clr2) 10%,
      #222 11%,
      transparent 12%,
      transparent 20%,
      #222 21%,
      var(--clr2) 22%,
      var(--clr2) 30%,
      #222 31%,
      transparent 32%
    ),
    var(--clr1);
  position: relative;
  float: left;
}

div:before,
div:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  border: calc(var(--unit) * 5.5) solid transparent;
  border-left: calc(var(--unit) * 3) solid var(--clr1);
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  transform-origin: left center;
  filter: drop-shadow(calc(var(--unit) * -11.11) 0px 0px #222)
    drop-shadow(1px 0px 0px #222);
}

div:after {
  transform: rotate(90deg)
    translate(calc(var(--unit) * 5.5), calc(var(--unit) * -5.5));
  z-index: 1;
  filter: drop-shadow(1px 0px 0px #222);
}

div:nth-child(odd) {
  background: radial-gradient(
      circle at 35% 65%,
      var(--clr1) 10%,
      #222 11%,
      transparent 12%,
      transparent 20%,
      #222 21%,
      var(--clr1) 22%,
      var(--clr1) 30%,
      #222 31%,
      transparent 32%
    ),
    var(--clr2);
}

div:nth-child(odd):before {
  border-left: calc(var(--unit) * 3) solid var(--clr2);
}

div:nth-child(odd):after {
  border-left: calc(var(--unit) * 3) solid var(--clr2);
}

@media only screen and (orientation: portrait) {
  :root {
    --unit: 2vmin;
  }
}