body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 200px;
  width: 100px;
  border: 1px solid;
  border-radius: 20px;
  position: relative;
  background: #FCFCFC;
}
div:before {
  content: '';
  position: absolute;
  width: 80px;
  height: 5px;
  background: black;
  top: calc(50% - 2.5px);
  left: calc(50% - 40px);
}
div:after {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #5C80BC;
  border-radius: 50%;
  top: 10px;
  left: 10px;
  box-shadow: 60px 0 #5C80BC, 60px 57.5px #5C80BC, 0 57.5px #5C80BC, 30px 30px #5C80BC, 0 100px #7E3F8F, 0 130px #7E3F8F, 0 160px #7E3F8F, 30px 100px #7E3F8F, 30px 130px #7E3F8F, 30px 160px #7E3F8F, 60px 100px #7E3F8F, 60px 130px #7E3F8F, 60px 160px #7E3F8F;
}