CodePenネタです。
さらにスター・ウォーズネタです。
CSSだけでBB-8を描く方法です。
CSSはSCSSを使っています。

サンプル

リアルです。

See the Pen CSS BB-8 by frontendzzzguy (@frontendzzzguy) on CodePen.

HTML

<div class="body">
    <div class="bb8">
        <div class="bb8__head">
            <div class="bb8__antenna">
            </div>
            <div class="bb8__eye">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="bb8__head-top">
                <b>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </b>
                <b>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </b>
                <b>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
            </div>
            <div class="bb8__neck-1">
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
            </div>
            <div class="bb8__neck-2">
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
            </div>
        </div>
        <div class="bb8__body">
            <b></b>
            <b></b>
            <b>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i class="dot-a"></i>
                <i></i>
                <i></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
            </b>
            <b>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
                <i class="dot-b"></i>
            </b>
            <div class="bb8__body-circle-1">
            </div>
            <div class="bb8__body-circle-2">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="bb8__body-circle-3">
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <sub></sub>
                <i>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </i>
                <i>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </i>
                <i>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </i>
                <i>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
</div>

CSS(SCSS)

長いです。

.body {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.dot-a {
  border-radius: 100%;
  width: 2px;
  height: 2px;
  opacity: .6;
  background: #fff;
}

.dot-b {
  background: #000;
  border-radius: 100%;
  width: 2px;
  height: 2px;
  display: block;
  opacity: .4;
}

::before, ::after {
  position: absolute;
  content: "";
  display: block;
}

.bb8 {
  position: absolute;
  width: 250px;
  height: 383px;
  left: 50%;
  transform: translateX(-50%);
  &::before {
    bottom: -3px;
    left: 0;
    right: 0;
    background: #000;
    height: 4px;
    z-index: 1;
    width: 100%;
    border-radius: 100%;
    opacity: .1;
  }
  * {
    position: absolute;
    display: block;
  }
}

.bb8__head {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.bb8__antenna {
  top: 0;
  left: calc(50% + 7px);
  transform: translateX(-50%);
  height: 55px;
  width: 1px;
  background: #000;
  &::before {
    bottom: -3px;
    width: 1px;
    height: 30px;
    background: #000;
    left: -11px;
  }
}

.bb8__head-top {
  width: 142px;
  height: 83px;
  background: #cdd0dd;
  top: 51px;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border: 1px solid #000;
  overflow: hidden;
  z-index: 3;
}

.bb8__eye {
  width: 34px;
  height: 34px;
  background: #a2a0ab;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
  border: 1px solid #000;
  z-index: 4;
  &::before {
    width: 32px;
    height: 32px;
    background: #6e6879;
    top: -1px;
    left: 0px;
    border-radius: 100%;
    z-index: 3;
    border: 1px solid #000;
  }
  &::after {
    width: 30px;
    height: 27px;
    background: #4b4352;
    top: -1px;
    left: 1px;
    border-radius: 100%;
    overflow: hidden;
    z-index: 5;
    border: 1px solid #000;
    z-index: 4;
  }
  i {
    &:nth-of-type(1) {
      width: 20px;
      height: 20px;
      background: #25191f;
      border-radius: 100px;
      z-index: 5;
      left: 50%;
      transform: translateX(-50%);
      top: 2px;
      border: 1px solid #25191f;
    }
    &:nth-of-type(2) {
      width: 15px;
      height: 15px;
      background: #8585a4;
      border-radius: 100px;
      z-index: 5;
      left: 8px;
      top: 6px;
      opacity: .8;
    }
    &:nth-of-type(3), &:nth-of-type(4) {}
  }
}

.bb8__head-top b {
  &:nth-of-type(1) {
    width: 100%;
    height: 9px;
    left: 0;
    top: 3px;
    background: #9f97a8;
    border: 1px solid #000;
    z-index: 2;
    overflow: hidden;
    &::before {
      width: 1px;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      top: 0px;
      background: #000;
      z-index: 1;
    }
    &::after {
      width: 1px;
      top: -3px;
      left: 44px;
      background: #000;
      transform: rotate(45deg);
      z-index: 1;
      height: 15px;
    }
    i {
      width: 1px;
      top: -3px;
      left: 44px;
      background: #000;
      transform: rotate(45deg);
      height: 15px;
      &:nth-of-type(1) {
        width: 1px;
        top: -3px;
        left: 55px;
        background: #000;
        transform: rotate(38deg);
        height: 15px;
        z-index: 1;
      }
      &:nth-of-type(2) {
        width: 1px;
        top: -3px;
        left: 84px;
        background: #000;
        transform: rotate(-38deg);
        height: 15px;
        z-index: 1;
      }
      &:nth-of-type(3) {
        width: 1px;
        top: -3px;
        left: 96px;
        background: #000;
        transform: rotate(-45deg);
        height: 15px;
        z-index: 1;
      }
      &:nth-of-type(4) {
        width: 1px;
        top: 7px;
        left: 44px;
        background: #000;
        height: 1px;
        border-radius: 100px;
        z-index: 1;
        &::before {
          width: 1px;
          top: -8px;
          left: 0px;
          background: #fff;
          height: 1px;
          border-radius: 100px;
          z-index: 1;
        }
        &::after {
          width: 1px;
          top: -4px;
          left: 4px;
          background: #fff;
          height: 1px;
          border-radius: 100px;
          z-index: 1;
        }
      }
      &:nth-of-type(5) {
        width: 1px;
        top: 7px;
        left: 68px;
        background: #000;
        height: 1px;
        border-radius: 100px;
        z-index: 1;
        &::before {
          width: 1px;
          top: -3px;
          left: -3px;
          background: #000;
          height: 1px;
          border-radius: 100px;
          z-index: 1;
        }
        &::after {
          width: 1px;
          top: -4px;
          left: 4px;
          background: #000;
          height: 1px;
          border-radius: 100px;
          z-index: 1;
        }
      }
      &:nth-of-type(6) {
        width: 100%;
        top: 0px;
        left: 0;
        background: #a7a5b2;
        height: 2px;
        z-index: 0;
        transform: rotate(0);
      }
    }
  }
  &:nth-of-type(2) {
    width: 45px;
    height: 66px;
    left: 0;
    bottom: 0px;
    background: #fdfefb;
    border: 1px solid #000;
    border-bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px 100px 0 0;
    overflow: hidden;
    z-index: 2;
    i {
      &:nth-of-type(1) {
        width: 9px;
        top: 49px;
        left: 0;
        background: #000;
        height: 2px;
        &::before {
          width: 4px;
          top: 3px;
          left: 0;
          background: #000;
          height: 1px;
        }
        &::after {
          width: 2px;
          top: 3px;
          left: 6px;
          background: #000;
          height: 1px;
        }
      }
      &:nth-of-type(2) {
        width: 1px;
        top: 42px;
        left: 1px;
        background: #000;
        height: 1px;
        border-radius: 100px;
        &::before {
          width: 1px;
          top: -3px;
          left: 0px;
          background: #000;
          height: 1px;
        }
      }
      &:nth-of-type(3) {
        width: 1px;
        top: -3px;
        left: 96px;
        background: #000;
        transform: rotate(-45deg);
        height: 15px;
      }
      &:nth-of-type(4) {
        width: 1px;
        top: 7px;
        left: 44px;
        background: #000;
        height: 1px;
        border-radius: 100px;
        &::before {
          width: 1px;
          top: -8px;
          left: 0px;
          background: #fff;
          height: 1px;
          border-radius: 100px;
        }
        &::after {
          width: 1px;
          top: -4px;
          left: 4px;
          background: #fff;
          height: 1px;
          border-radius: 100px;
        }
      }
      &:nth-of-type(5) {
        width: 1px;
        top: 7px;
        left: 68px;
        background: #000;
        height: 1px;
        border-radius: 100px;
        &::before {
          width: 1px;
          top: -3px;
          left: -3px;
          background: #000;
          height: 1px;
          border-radius: 100px;
        }
        &::after {
          width: 1px;
          top: -4px;
          left: 4px;
          background: #000;
          height: 1px;
          border-radius: 100px;
        }
      }
    }
    &::before {
      width: 100%;
      height: 1px;
      bottom: 20px;
      left: 0;
      background: #000;
    }
    &::after {
      width: 100%;
      height: 3px;
      bottom: 17px;
      left: 0;
      background: #847579;
    }
  }
  &:nth-of-type(3) {
    width: 43px;
    height: 40px;
    bottom: 0px;
    background: #fafaf6;
    border: 1px solid #000;
    border-bottom: 0;
    left: 101px;
    transform: translateX(-50%);
    border-radius: 0 18px 0 0;
    z-index: 2;
    i {
      width: 1px;
      height: 1px;
      bottom: 2px;
      background: #000;
      left: 3px;
      border-radius: 100px;
      z-index: 2;
      &:nth-of-type(1) {
        &::after {
          width: 1px;
          background: #000;
          height: 1px;
          left: 2px;
          top: 0px;
          border-radius: 100px;
        }
        &::before {
          width: 1px;
          background: #000;
          height: 1px;
          left: 38px;
          top: 0px;
          border-radius: 100px;
        }
      }
      &:nth-of-type(2) {
        bottom: 5px;
        &::before {
          width: 1px;
          background: #000;
          height: 20px;
          left: -2px;
          top: -10px;
          opacity: .5;
        }
        &::after {
          width: 1px;
          background: #000;
          height: 1px;
          left: 2px;
          top: 0px;
          border-radius: 100px;
        }
      }
      &:nth-of-type(3) {
        bottom: 8px;
        &::before {
          width: 1px;
          background: #000;
          height: 1px;
          left: 38px;
          top: 0px;
          border-radius: 100px;
        }
        &::after {
          width: 1px;
          background: #000;
          height: 1px;
          left: 38px;
          top: 3px;
          border-radius: 100px;
        }
      }
      &:nth-of-type(4) {
        bottom: 11px;
        &::before {
          width: 4px;
          background: #cb9035;
          height: 4px;
          left: 29px;
          top: 5px;
          border: 1px solid #000;
        }
      }
      &:nth-of-type(5) {
        bottom: 14px;
        z-index: 5;
      }
    }
    &::before {
      width: 25px;
      height: 25px;
      top: -10px;
      left: -14px;
      background: #fdfefb;
      border: 1px solid #000;
      border-radius: 100px;
    }
    &::after {
      width: 23px;
      height: 28px;
      top: -13px;
      left: -15px;
      background: #fdfefb;
      transform: rotate(38deg);
    }
  }
  &:nth-of-type(4) {
    bottom: 2px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #fff;
    transform: translateX(-50%);
    border: 1px solid #000;
    z-index: 2;
    &::before {
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background: transparent;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
    }
  }
  &:nth-of-type(5) {
    background: #b4afb6;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    border: 1px solid #000;
    bottom: 14px;
    right: 23px;
    z-index: 2;
    &::before {
      top: 50%;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 100%;
      background: #746972;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
    }
    &::after {
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background: #4b4252;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
    }
  }
  &:nth-of-type(6) {
    background: #e18102;
    width: 10px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    right: -10px;
    z-index: 1;
    &::before {
      background: #000;
      width: 3px;
      height: 1px;
      top: -7px;
      left: -8px;
      z-index: 1;
    }
    &::after {
      background: #000;
      width: 3px;
      height: 1px;
      top: -4px;
      left: -8px;
      z-index: 1;
    }
  }
  &:nth-of-type(7) {
    background: #e18102;
    width: 10px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    right: 8px;
    z-index: 1;
    &::before {
      background: #000;
      width: 1px;
      height: 1px;
      top: 1px;
      right: 1px;
      z-index: 1;
    }
    &::after {
      background: #000;
      width: 1px;
      height: 1px;
      top: 4px;
      right: 1px;
      z-index: 1;
    }
  }
  &:nth-of-type(8) {
    background: #ae9346;
    width: 1px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    left: 1px;
    z-index: 1;
    &::before {
      background: #000;
      width: 1px;
      height: 1px;
      top: -3px;
      right: 1px;
      z-index: 1;
    }
    &::after {
      background: #000;
      width: 1px;
      height: 1px;
      top: -3px;
      right: -1px;
      z-index: 1;
    }
  }
  &:nth-of-type(9) {
    background: #ed9619;
    width: 4px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    left: 5px;
    z-index: 1;
  }
  &:nth-of-type(10) {
    background: #c5a267;
    width: 10px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    left: 10px;
    z-index: 1;
    &::before {
      background: #bea760;
      width: 6px;
      height: 1px;
      border: 1px solid #000;
      top: 2px;
      left: 1px;
      z-index: 1;
    }
    &::after {
      background: #865c24;
      width: 6px;
      height: 1px;
      border: 1px solid #000;
      top: 6px;
      left: 1px;
      z-index: 1;
    }
  }
  &:nth-of-type(11) {
    background: #d88c24;
    width: 10px;
    height: 12px;
    border: 1px solid #000;
    border-bottom: 0;
    bottom: 0;
    left: 37px;
    border-right: 0;
    z-index: 1;
    &::before {
      background: #000;
      width: 1px;
      height: 1px;
      top: 1px;
      right: 1px;
      z-index: 1;
    }
    &::after {
      background: #000;
      width: 1px;
      height: 1px;
      top: 4px;
      right: 1px;
      z-index: 1;
    }
  }
  &:nth-of-type(12) {
    background: #eeeff3;
    width: 20px;
    height: 7px;
    border: 1px solid #000;
    bottom: 20px;
    left: 30px;
    border-right: 0;
    z-index: 1;
    border-radius: 5px 0 0 0;
    &::before {
      bottom: 1px;
      right: 4px;
      width: 2px;
      height: 2px;
      border-radius: 100%;
      background: #000;
    }
    &::after {
      bottom: 2px;
      left: 2px;
      width: 2px;
      height: 2px;
      border-radius: 100%;
      background: #c1bbb8;
      border: 1px solid #000;
    }
  }
  &:nth-of-type(13) {
    background: #e18102;
    width: 100%;
    height: 3px;
    border: 1px solid #000;
    top: 18px;
    left: 0;
    z-index: 0;
  }
  &:nth-of-type(14) {
    background: #cdd0de;
    width: 140px;
    height: 140px;
    top: 31px;
    z-index: 0;
    left: 1px;
    transform: rotate(45deg);
    z-index: 0;
    &::before {
      top: 24px;
      left: -1px;
      width: 1px;
      height: 5px;
      background: #000;
      transform: rotate(0);
    }
    &::after {
      top: -3px;
      left: 26px;
      width: 1px;
      height: 6px;
      background: #000;
      transform: rotate(90deg);
    }
  }
  &:nth-of-type(15) {
    top: 25px;
    left: 47px;
    width: 9px;
    height: 1px;
    background: #000;
    &::before {
      top: 3px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #000;
    }
  }
  &:nth-of-type(16) {
    background: #fff;
    width: 1px;
    height: 1px;
    top: 40px;
    left: 12px;
    border-radius: 100px;
    &::before {
      top: -3px;
      left: 0;
      width: 1px;
      height: 1px;
      background: #fff;
      border-radius: 100px;
    }
  }
  &:nth-of-type(17) {
    &::after {
      top: 0;
      left: 4px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    background: #000;
    width: 1px;
    height: 1px;
    top: 24px;
    left: 19px;
    border-radius: 100px;
    &::before {
      top: 0;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(16)::after {
    top: -6px;
    left: 0;
    width: 1px;
    height: 1px;
    background: #fff;
    border-radius: 100px;
  }
  &:nth-of-type(18) {
    background: #fff;
    width: 1px;
    height: 1px;
    top: 26px;
    left: 17px;
    border-radius: 100px;
    &::after {
      top: 2px;
      left: 0px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 0;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(19) {
    background: #000;
    width: 1px;
    height: 1px;
    top: 68px;
    left: 5px;
    border-radius: 100px;
    &::after {
      top: 0px;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 0;
      left: 4px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(20) {
    background: #000;
    width: 3px;
    height: 1px;
    top: 51px;
    left: 31px;
    &::after {
      top: 0px;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: -2px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(21) {
    background: #000;
    width: 10px;
    height: 1px;
    top: 32px;
    left: 123px;
    &::after {
      top: 2px;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 2px;
      left: 4px;
      width: 100%;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(22) {
    background: #000;
    width: 1px;
    height: 1px;
    top: 40px;
    left: 95px;
    border-radius: 100px;
    &::after {
      top: 0px;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 0;
      left: 4px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(23) {
    background: #000;
    width: 5px;
    height: 1px;
    top: 55px;
    left: 138px;
    &::after {
      top: 4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #000;
    }
    &::before {
      top: 2px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #000;
    }
  }
  &:nth-of-type(24) {
    background: #000;
    width: 1px;
    height: 1px;
    top: 16px;
    left: 27px;
    border-radius: 100px;
    &::after {
      top: 0px;
      left: 4px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 0;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
  &:nth-of-type(25) {
    background: #000;
    width: 1px;
    height: 1px;
    top: 20px;
    left: 92px;
    border-radius: 100px;
    z-index: 10;
    &::after {
      top: 0px;
      left: 4px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
    &::before {
      top: 0;
      left: 2px;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
    }
  }
}

.bb8__neck-1 {
  border-bottom: 9px solid #a8a9bf;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  height: 0;
  width: 136px;
  top: 136px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  z-index: 3;
  b {
    &:nth-of-type(1) {
      background: #000;
      width: 1px;
      height: 10px;
      right: -2px;
      top: 0px;
      transform: rotate(-23deg);
    }
    &:nth-of-type(2) {
      background: #000;
      width: 1px;
      height: 10px;
      left: -2px;
      top: 0px;
      transform: rotate(23deg);
    }
    &:nth-of-type(3) {
      background: #000;
      width: 100%;
      height: 1px;
      left: 0px;
      top: 0px;
    }
    &:nth-of-type(4) {
      background: #000;
      width: 101%;
      background: #9996ad;
      height: 4px;
      top: 4px;
      border-top: 1px solid #000;
      left: 50%;
      transform: translateX(-50%);
    }
    &:nth-of-type(5) {
      background: #000;
      width: 88px;
      height: 1px;
      left: 0px;
      top: 2px;
    }
    &:nth-of-type(6) {
      background: #000;
      width: 1px;
      height: 7px;
      left: 50%;
      top: -4px;
      transform: translateX(-50%);
      &::before {
        background: #000;
        width: 1px;
        height: 7px;
        left: 12px;
        top: -1px;
        transform: rotate(-25deg);
      }
      &::after {
        background: #000;
        width: 1px;
        height: 7px;
        left: -12px;
        top: -1px;
        transform: rotate(25deg);
      }
    }
    &:nth-of-type(7) {
      background: #000;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
      top: 6px;
      right: 70px;
      &::before {
        background: #000;
        width: 1px;
        height: 1px;
        top: 0;
        left: 2px;
        background: #000;
        border-radius: 100px;
      }
      &::after {
        background: #000;
        width: 1px;
        height: 1px;
        background: #000;
        border-radius: 100px;
        top: 0;
        left: 4px;
      }
    }
    &:nth-of-type(8) {
      background: #000;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
      top: 6px;
      right: 64px;
      &::before {
        background: #000;
        width: 1px;
        height: 1px;
        top: 0;
        left: 2px;
        background: #000;
        border-radius: 100px;
      }
      &::after {
        background: #000;
        width: 1px;
        height: 1px;
        background: #000;
        border-radius: 100px;
        top: 0;
        left: 4px;
      }
    }
    &:nth-of-type(9) {
      background: #000;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
      top: 6px;
      right: 54px;
      &::before {
        background: #fff;
        width: 1px;
        height: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
      }
      &::after {
        width: 1px;
        height: 1px;
        background: #000;
        border-radius: 100px;
        top: 0;
        left: 4px;
      }
    }
    &:nth-of-type(10) {
      background: #000;
      width: 1px;
      height: 1px;
      background: #000;
      border-radius: 100px;
      top: 6px;
      right: 133px;
      &::before {
        background: #000;
        width: 1px;
        height: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
      }
      &::after {
        width: 1px;
        height: 1px;
        background: #fff;
        border-radius: 100px;
        top: 0;
        left: 12px;
      }
    }
  }
}

.bb8__neck-2 {
  border-bottom: 11px solid #bfbfd2;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  height: 0;
  width: 126px;
  top: 139px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  z-index: 1;
  b {
    &:nth-of-type(1) {
      background: #000;
      width: 1px;
      height: 10px;
      right: -2px;
      top: 0px;
      transform: rotate(-23deg);
    }
    &:nth-of-type(2) {
      background: #000;
      width: 1px;
      height: 10px;
      left: -2px;
      top: 0px;
      transform: rotate(23deg);
    }
    &:nth-of-type(3) {
      background: #000;
      width: 100%;
      height: 1px;
      left: 0px;
      top: 0px;
    }
    &:nth-of-type(4) {
      background: #000;
      height: 1px;
      width: 104px;
      top: 2px;
      left: -1px;
    }
    &:nth-of-type(5), &:nth-of-type(6), &:nth-of-type(7), &:nth-of-type(8), &:nth-of-type(9), &:nth-of-type(10) {
      background: #000;
    }
  }
}

.bb8__body {
  width: 245px;
  height: 245px;
  background: #d5d7df;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 100%;
  border: 1px solid #000;
  overflow: hidden;
  left: 50%;
  z-index: 0;
  padding-bottom: 5p;
  b {
    &:first-of-type {
      width: 13px;
      height: 245px;
      background: #d2570f;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      left: 50%;
      z-index: 0;
      border: 1px solid #000;
    }
    &:nth-of-type(2) {
      width: 13px;
      height: 245px;
      background: #bd4700;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      left: 50%;
      z-index: 0;
      border: 1px solid #000;
      &::before {
        width: 1px;
        height: 20px;
        left: 6px;
        top: 4px;
        background: #000;
        transform: rotate(0deg);
      }
      &::after {
        width: 1px;
        height: 20px;
        left: 9px;
        top: 4px;
        background: #000;
        transform: rotate(0deg);
      }
    }
    &:nth-of-type(3) {
      width: 230px;
      height: 230px;
      background: #f8a926;
      bottom: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      border: 1px solid #000;
      overflow: hidden;
      z-index: 0;
      i {
        &:nth-of-type(1) {
          width: 10px;
          height: 200px;
          background: #d87800;
          border-radius: 10px;
          top: 92px;
          left: 6px;
          opacity: .7;
        }
        &:nth-of-type(2) {
          width: 10px;
          height: 200px;
          background: #cd5601;
          border-radius: 10px;
          top: 120px;
          left: 26px;
          opacity: .7;
          transform: rotate(90deg);
        }
        &:nth-of-type(3) {
          width: 1px;
          height: 200px;
          background: rgba(0, 0, 0, 0.2);
          top: 0;
          left: 2px;
        }
        &:nth-of-type(4) {
          width: 1px;
          height: 200px;
          background: rgba(0, 0, 0, 0.4);
          top: 119px;
          left: 2px;
          transform: rotate(90deg);
        }
        &:nth-of-type(5) {
          width: 10px;
          height: 100px;
          background: #dd7d0e;
          border-radius: 10px;
          top: -36px;
          left: 130px;
          opacity: .8;
          transform: rotate(90deg);
        }
        &:nth-of-type(6) {
          width: 10px;
          height: 200px;
          background: #cc5705;
          border-radius: 10px;
          top: 100px;
          left: 224px;
          opacity: .7;
          transform: rotate(0deg);
        }
        &:nth-of-type(7) {
          top: 221px;
          left: 68px;
        }
        &:nth-of-type(8) {
          top: 221px;
          left: 71px;
        }
        &:nth-of-type(9) {
          top: 221px;
          left: 74px;
        }
        &:nth-of-type(10) {
          top: 221px;
          left: 77px;
        }
        &:nth-of-type(11) {
          top: 155px;
          left: 226px;
        }
        &:nth-of-type(12) {
          top: 152px;
          left: 226px;
        }
        &:nth-of-type(13) {
          top: 152px;
          left: 221px;
        }
        &:nth-of-type(14) {
          top: 149px;
          left: 221px;
        }
        &:nth-of-type(15) {
          top: 146px;
          left: 221px;
        }
        &:nth-of-type(16) {
          top: 11px;
          left: 175px;
        }
        &:nth-of-type(17) {
          top: 11px;
          left: 172px;
        }
        &:nth-of-type(18) {
          top: 19px;
          left: 105px;
          width: 20px;
          height: 1px;
          transform: rotate(90deg);
          background: #000;
        }
        &:nth-of-type(19) {
          top: 22px;
          left: 109px;
          width: 20px;
          height: 1px;
          transform: rotate(90deg);
          background: #000;
        }
        &:nth-of-type(20) {
          top: 174px;
          left: 11px;
        }
        &:nth-of-type(21) {
          top: 170px;
          left: 11px;
        }
        &:nth-of-type(22) {
          top: 168px;
          left: 9px;
        }
        &:nth-of-type(23) {
          top: 172px;
          left: 9px;
        }
      }
    }
    &:last-of-type {
      width: 200px;
      height: 200px;
      background: #e7e8ec;
      bottom: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      border: 1px solid #000;
      overflow: hidden;
      z-index: 0;
      &::before {
        width: 2px;
        height: 220px;
        background: #000;
        bottom: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        overflow: hidden;
        z-index: 0;
      }
      &::after {
        width: 2px;
        height: 220px;
        background: #000;
        bottom: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        overflow: hidden;
        z-index: 0;
      }
      i {
        &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6), &:nth-of-type(7), &:nth-of-type(8) {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          border: 1px solid #000;
          background: #f6f1ee;
        }
        &:nth-of-type(1)::before, &:nth-of-type(2)::before, &:nth-of-type(3)::before, &:nth-of-type(4)::before, &:nth-of-type(5)::before, &:nth-of-type(6)::before, &:nth-of-type(7)::before, &:nth-of-type(8)::before {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 4px;
          height: 4px;
          border-radius: 100%;
          border: 1px solid #000;
          background: #f6f1ee;
        }
        &:nth-of-type(1) {
          top: 79px;
          left: 4px;
        }
        &:nth-of-type(2) {
          top: 110px;
          left: 4px;
        }
        &:nth-of-type(3) {
          top: 184px;
          left: 81px;
        }
        &:nth-of-type(4) {
          top: 184px;
          left: 107px;
        }
        &:nth-of-type(5) {
          top: 5px;
          left: 76px;
        }
        &:nth-of-type(6) {
          top: 5px;
          left: 110px;
        }
        &:nth-of-type(7) {
          top: 79px;
          left: 184px;
        }
        &:nth-of-type(8) {
          top: 108px;
          left: 184px;
        }
        &:nth-of-type(9), &:nth-of-type(10), &:nth-of-type(11), &:nth-of-type(12), &:nth-of-type(13), &:nth-of-type(14), &:nth-of-type(15), &:nth-of-type(16), &:nth-of-type(17), &:nth-of-type(18), &:nth-of-type(19), &:nth-of-type(20) {
          width: 1px;
          height: 20px;
          background: #000;
          transform: rotate(90deg);
        }
        &:nth-of-type(9) {
          top: 43px;
          left: -3px;
        }
        &:nth-of-type(10) {
          top: 47px;
          left: -7px;
        }
        &:nth-of-type(11) {
          top: 95px;
          left: -6px;
        }
        &:nth-of-type(12) {
          top: 190px;
          left: 44px;
          transform: rotate(0deg);
        }
        &:nth-of-type(13) {
          top: 194px;
          left: 48px;
          transform: rotate(0deg);
        }
        &:nth-of-type(14) {
          top: 197px;
          left: 79px;
          transform: rotate(0deg);
        }
        &:nth-of-type(15) {
          top: 197px;
          left: 84px;
          transform: rotate(0deg);
        }
        &:nth-of-type(16) {
          top: 197px;
          left: 89px;
          transform: rotate(0deg);
        }
        &:nth-of-type(17) {
          top: 94px;
          left: 204px;
          transform: rotate(90deg);
        }
        &:nth-of-type(18) {
          top: 97px;
          left: 207px;
          transform: rotate(90deg);
        }
        &:nth-of-type(19) {
          top: -11px;
          left: 104px;
          transform: rotate(0deg);
        }
        &:nth-of-type(20) {
          top: -17px;
          left: 112px;
          transform: rotate(0deg);
        }
        &:nth-of-type(21) {
          top: 2px;
          left: 44px;
        }
        &:nth-of-type(22) {
          top: 4px;
          left: 42px;
        }
        &:nth-of-type(23) {
          top: 7px;
          left: 44px;
        }
        &:nth-of-type(24) {
          top: 12px;
          left: 39px;
        }
        &:nth-of-type(25) {
          top: 10px;
          left: 41px;
        }
        &:nth-of-type(26) {
          top: 18px;
          left: 76px;
        }
        &:nth-of-type(27) {
          top: 15px;
          left: 74px;
        }
        &:nth-of-type(28) {
          top: 12px;
          left: 73px;
        }
        &:nth-of-type(29) {
          top: 8px;
          left: 73px;
        }
        &:nth-of-type(30) {
          top: 18px;
          left: 72px;
        }
        &:nth-of-type(31) {
          top: 15px;
          left: 70px;
        }
        &:nth-of-type(32) {
          top: 11px;
          left: 70px;
        }
        &:nth-of-type(33) {
          top: 95px;
          left: 1px;
        }
        &:nth-of-type(34) {
          top: 92px;
          left: 1px;
        }
        &:nth-of-type(35) {
          top: 102px;
          left: 7px;
        }
        &:nth-of-type(36) {
          top: 105px;
          left: 7px;
        }
        &:nth-of-type(37) {
          top: 104px;
          left: 10px;
        }
        &:nth-of-type(38) {
          top: 107px;
          left: 10px;
        }
        &:nth-of-type(39) {
          top: 160px;
          left: 1px;
        }
        &:nth-of-type(40) {
          top: 163px;
          left: 1px;
        }
        &:nth-of-type(41) {
          top: 166px;
          left: 1px;
        }
        &:nth-of-type(42) {
          top: 169px;
          left: 1px;
        }
        &:nth-of-type(43) {
          top: 165px;
          left: 4px;
        }
        &:nth-of-type(44) {
          top: 168px;
          left: 4px;
        }
        &:nth-of-type(45) {
          top: 171px;
          left: 4px;
        }
        &:nth-of-type(46) {
          top: 174px;
          left: 4px;
        }
        &:nth-of-type(47) {
          top: 176px;
          left: 6px;
        }
        &:nth-of-type(48) {
          top: 177px;
          left: 9px;
        }
        &:nth-of-type(49) {
          top: 179px;
          left: 12px;
        }
        &:nth-of-type(50) {
          top: 197px;
          left: 29px;
        }
        &:nth-of-type(51) {
          top: 197px;
          left: 32px;
        }
        &:nth-of-type(52) {
          top: 197px;
          left: 35px;
        }
        &:nth-of-type(53) {
          top: 194px;
          left: 31px;
        }
        &:nth-of-type(54) {
          top: 194px;
          left: 34px;
        }
        &:nth-of-type(55) {
          top: 194px;
          left: 37px;
        }
        &:nth-of-type(56) {
          top: 194px;
          left: 102px;
        }
        &:nth-of-type(57) {
          top: 197px;
          left: 102px;
        }
        &:nth-of-type(58) {
          top: 197px;
          left: 105px;
        }
        &:nth-of-type(59) {
          top: 194px;
          left: 102px;
        }
        &:nth-of-type(60) {
          top: 197px;
          left: 167px;
        }
        &:nth-of-type(61) {
          top: 197px;
          left: 164px;
        }
        &:nth-of-type(62) {
          top: 197px;
          left: 161px;
        }
        &:nth-of-type(63) {
          top: 194px;
          left: 167px;
        }
        &:nth-of-type(64) {
          top: 194px;
          left: 164px;
        }
        &:nth-of-type(65) {
          top: 194px;
          left: 161px;
        }
        &:nth-of-type(66) {
          top: 197px;
          left: 158px;
        }
        &:nth-of-type(67) {
          top: 102px;
          left: 184px;
        }
        &:nth-of-type(68) {
          top: 105px;
          left: 187px;
        }
        &:nth-of-type(69) {
          top: 90px;
          left: 195px;
        }
        &:nth-of-type(70) {
          top: 93px;
          left: 195px;
        }
        &:nth-of-type(71) {
          top: 78px;
          left: 196px;
        }
        &:nth-of-type(72) {
          top: 74px;
          left: 193px;
        }
        &:nth-of-type(73) {
          top: 70px;
          left: 195px;
        }
        &:nth-of-type(74) {
          top: 74px;
          left: 189px;
        }
        &:nth-of-type(75) {
          top: 74px;
          left: 197px;
        }
      }
    }
  }
}

.bb8__body-circle-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border: 1px solid #000;
  overflow: hidden;
  border-radius: 100%;
  background: #f6f5fc;
  z-index: 1;
}

.bb8__body-circle-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 154px;
  height: 154px;
  border: 1px solid #000;
  overflow: hidden;
  border-radius: 100%;
  background: #fd942d;
  z-index: 2;
  i {
    background: #fd942d;
    &:nth-of-type(1) {
      background: #fd942d;
      width: 140px;
      height: 140px;
      border-radius: 100%;
      background: #d77509;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      z-index: 0;
    }
    &:nth-of-type(2) {
      background: #fd942d;
      width: 181px;
      height: 100px;
      transform: rotate(12deg);
      top: -22px;
    }
    &:nth-of-type(3) {
      background: #fd942d;
      width: 211px;
      height: 92px;
      transform: rotate(64deg);
      top: 0px;
      left: 0px;
    }
    &:nth-of-type(4) {
      background: #fd942d;
    }
    &:nth-of-type(5) {
      background: #fabc30;
      height: 7px;
      width: 41px;
      top: -3px;
      left: 50%;
      border: 1px solid #000;
      transform: translateX(-50%);
    }
    &:nth-of-type(6) {
      background: #000;
      width: 1px;
      height: 7px;
      top: 55px;
      left: 9px;
      transform: rotate(16deg);
    }
    &:nth-of-type(7), &:nth-of-type(8), &:nth-of-type(9), &:nth-of-type(10) {
      background: #fd942d;
    }
  }
  &::before {
    width: 1px;
    height: 100px;
    top: 10px;
    background: #000;
    transform: rotate(-77deg);
    z-index: 1;
  }
  &::after {
    width: 1px;
    height: 100px;
    top: 81px;
    left: 95px;
    background: #000;
    transform: rotate(-25deg);
  }
}

.bb8__body-circle-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border: 1px solid #000;
  overflow: hidden;
  border-radius: 100%;
  background: #b8bdd2;
  z-index: 3;
  sub {
    &:nth-of-type(1) {
      background: #504e62;
      width: 93px;
      height: 93px;
      border-radius: 100%;
      border: 1px solid #000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      &::before {
        left: -5px;
        top: 50%;
        transform: translateY(-50%);
        background: #dddae4;
        width: 8px;
        height: 15px;
        border: 1px solid #000;
      }
      &::after {
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        background: #dadae8;
        width: 8px;
        height: 15px;
        border: 1px solid #000;
      }
    }
    &:nth-of-type(2) {
      background: #b8bed2;
      width: 30px;
      height: 30px;
      left: 12px;
      top: 12px;
      transform: rotate(30deg);
    }
    &:nth-of-type(3) {
      background: #b8bed2;
      width: 30px;
      height: 30px;
      left: 12px;
      top: 65px;
      transform: rotate(-30deg);
    }
    &:nth-of-type(4) {
      background: #b8bed2;
      width: 30px;
      height: 30px;
      right: 12px;
      top: 65px;
      transform: rotate(-60deg);
    }
    &:nth-of-type(5) {
      background: #b8bed2;
      width: 30px;
      height: 30px;
      right: 12px;
      top: 12px;
      transform: rotate(-30deg);
    }
    &:nth-of-type(6) {
      background: #b8bed2;
      width: 60px;
      height: 150px;
      right: 12px;
      top: 12px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &:nth-of-type(7) {
      background: #726677;
      width: 1px;
      height: 10px;
      right: 12px;
      left: 26px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #000;
      &::before {
        background: #585560;
        width: 1px;
        height: 1px;
        right: 12px;
        left: -1px;
        top: -6px;
        border: 1px solid #000;
      }
      &::after {
        background: #635760;
        width: 1px;
        height: 1px;
        right: 12px;
        left: -1px;
        bottom: -5px;
        border: 1px solid #000;
      }
    }
    &:nth-of-type(8) {
      background: #766f7b;
      width: 1px;
      height: 10px;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #000;
      &::before {
        background: #585560;
        width: 1px;
        height: 1px;
        right: 12px;
        left: -1px;
        top: -6px;
        border: 1px solid #000;
      }
      &::after {
        background: #635760;
        width: 1px;
        height: 1px;
        right: 12px;
        left: -1px;
        bottom: -5px;
        border: 1px solid #000;
      }
    }
  }
  i {
    b {}
    &:nth-of-type(1) {
      border-bottom: 43px solid #fca22c;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      height: 0;
      width: 10px;
      left: 0px;
      transform: rotate(45deg);
      bottom: 0;
      &::before {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: #f8fbff;
        border-radius: 100px;
        border: 1px solid #000;
      }
    }
    &:nth-of-type(2) {
      border-bottom: 43px solid #f79e28;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      height: 0;
      width: 10px;
      bottom: 0;
      right: 0;
      transform: rotate(-45deg);
      &::before {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: #f8fbff;
        border-radius: 100px;
        border: 1px solid #000;
      }
      &::after {
        top: 21px;
        left: -4px;
        width: 18px;
        height: 4px;
        background: #df821c;
        transform: rotate(-1deg);
      }
    }
    &:nth-of-type(3) {
      border-bottom: 43px solid #fab62d;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      height: 0;
      width: 10px;
      top: 0;
      left: 0;
      transform: rotate(135deg);
      &::before {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: #f8fbff;
        border-radius: 100px;
        border: 1px solid #000;
      }
      &::after {
        top: 1px;
        left: 8px;
        width: 4px;
        height: 24px;
        background: #df821c;
        transform: rotate(-11deg);
      }
    }
    &:nth-of-type(4) {
      border-bottom: 43px solid #f7ab2a;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      height: 0;
      width: 10px;
      top: 0;
      right: 0;
      transform: rotate(225deg);
      &::before {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: #f8fbff;
        border-radius: 100px;
        border: 1px solid #000;
      }
    }
    &:nth-of-type(1) span:nth-of-type(1), &:nth-of-type(2) span:nth-of-type(1), &:nth-of-type(3) span:nth-of-type(1), &:nth-of-type(4) span:nth-of-type(1) {
      width: 10px;
      height: 1px;
      left: 0px;
      bottom: 0;
      background: #000;
    }
    &:nth-of-type(1) span:nth-of-type(2), &:nth-of-type(2) span:nth-of-type(2), &:nth-of-type(3) span:nth-of-type(2), &:nth-of-type(4) span:nth-of-type(2) {
      width: 1px;
      height: 43px;
      left: -5px;
      top: 100%;
      background: #000;
      transform: rotate(12deg);
    }
    &:nth-of-type(1) span:nth-of-type(3), &:nth-of-type(2) span:nth-of-type(3), &:nth-of-type(3) span:nth-of-type(3), &:nth-of-type(4) span:nth-of-type(3) {
      bottom: 0;
      width: 1px;
      height: 43px;
      right: -5px;
      top: 100%;
      background: #000;
      transform: rotate(-12deg);
    }
    &:nth-of-type(1) span:nth-of-type(4), &:nth-of-type(2) span:nth-of-type(4), &:nth-of-type(3) span:nth-of-type(4), &:nth-of-type(4) span:nth-of-type(4) {
      bottom: 0;
      width: 1px;
      height: 5px;
      right: -1px;
      top: 15px;
      background: #000;
      transform: rotate(-94deg);
      z-index: 6;
    }
    &:nth-of-type(5) {
      background: #8685a0;
      width: 5px;
      height: 28px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      overflow: hidden;
      &::before {
        width: 3px;
        height: 100%;
        right: 0;
        background: #584e62;
        top: 8px;
      }
      &::after {
        width: 2px;
        height: 2px;
        right: 0px;
        background: #000;
        top: 6px;
        border-radius: 100px;
      }
    }
    &:nth-of-type(6) {
      background: #88859b;
      width: 5px;
      height: 28px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      margin-left: -12px;
      overflow: hidden;
      &::before {
        width: 2px;
        height: 100%;
        right: 0;
        background: #584e62;
        top: 4px;
      }
      &::after {
        width: 100%;
        height: 100%;
        right: 0;
        background: #584e62;
        top: 16px;
      }
    }
    &:nth-of-type(7) {
      background: #827f9d;
      width: 5px;
      height: 28px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      margin-left: 12px;
      overflow: hidden;
      &::before {
        width: 2px;
        height: 100%;
        right: 0;
        background: #453946;
      }
    }
    &:nth-of-type(8) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 34px;
      left: 54px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 0;
        left: 4px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(9) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 32px;
      left: 56px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: -2px;
        left: 0;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(10) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 34px;
      left: 50px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 8px;
        left: -7px;
        border-radius: 100px;
        background: #fff;
      }
    }
    &:nth-of-type(11) {
      background: #fff;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 42px;
      left: 67px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #fff;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0;
        border-radius: 100px;
        background: #fff;
      }
    }
    &:nth-of-type(12) {
      background: #fff;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 50px;
      left: 85px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #fff;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0;
        border-radius: 100px;
        background: #fff;
      }
    }
    &:nth-of-type(13) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 46px;
      left: 85px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 6px;
        left: 2px;
        border-radius: 100px;
        background: #fff;
      }
    }
    &:nth-of-type(14) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 50px;
      left: 98px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(15) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 50px;
      left: 9px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(16) {
      background: #fff;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 52px;
      left: 13px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #fff;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0px;
        border-radius: 100px;
        background: #fff;
      }
    }
    &:nth-of-type(17) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 58px;
      left: 13px;
      &::before {
        height: 1px;
        width: 1px;
        top: 2px;
        left: 0;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 4px;
        left: 0px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(18) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 101px;
      left: 33px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 0;
        left: 4px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(19) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 103px;
      left: 37px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: -4px;
        left: -2px;
        border-radius: 100px;
        background: #000;
      }
    }
    &:nth-of-type(20) {
      background: #000;
      height: 1px;
      width: 1px;
      border-radius: 100px;
      top: 73px;
      left: 37px;
      &::before {
        height: 1px;
        width: 1px;
        top: 0;
        left: 2px;
        border-radius: 100px;
        background: #000;
      }
      &::after {
        height: 1px;
        width: 1px;
        top: 2px;
        left: -2px;
        border-radius: 100px;
        background: #000;
      }
    }
  }
}

一言

さらに動かしたら面白そう。


コメントを投稿する

* が付いている項目は必須です。