CSS Art: Favorite Snack #dev.to - Chocolate Chip Cookie CSS Art

CSS Art: Favorite Snack #dev.to - Chocolate Chip Cookie CSS Art

by sh20raj

HTML

<div class="cookie">
    <div class="chips chip1"></div>
    <div class="chips chip2"></div>
    <div class="chips chip3"></div>
    <div class="chips chip4"></div>
    <div class="chips chip5"></div>
    <div class="chips chip6"></div>
    <div class="chips chip7"></div>
    <div class="chips chip8"></div>
    <div class="chips chip9"></div>
    <div class="chips chip10"></div>
    <div class="chips chip11"></div>
    <div class="chips chip12"></div>
    <div class="chips chip13"></div>
    <div class="chips chip14"></div>
    <div class="chips chip15"></div>
    <div class="chips chip16"></div>
    <div class="chips chip17"></div>
    <div class="chips chip18"></div>
    <div class="chips chip19"></div>
    <div class="chips chip20"></div>
    <div class="chips chip21"></div>
    <div class="chips chip22"></div>
    <div class="chips chip23"></div>
    <div class="chips chip24"></div>
    <div class="rain"></div>
    <div class="rain"></div>
    <div class="rain"></div>
    <div class="rain"></div>
    <div class="rain"></div>

  </div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ffefba, #d9a57c);
  margin: 0;
  flex-direction: column;
/*   border : 40px solid red; */
/*   border-radius: 25px; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  
}

.cookie {
  width: 250px;
  height: 250px;
  background-color: #8b5a2b;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0px -10px 20px rgba(0, 0, 0, 0.3);
  animation: rotateCookie 5s infinite linear;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  
}

@keyframes rotateCookie {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.chips {
  width: 20px;
  height: 20px;
  background-color: #5e3d24;
  border-radius: 50%;
  position: absolute;
  transform-origin: center;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}




.chip1 {
  top: 30px;
  left: 30px;
}

.chip2 {
  top: 70px;
  left: 100px;
}

.chip3 {
  top: 120px;
  left: 50px;
}

.chip4 {
  top: 90px;
  left: 160px;
}

.chip5 {
  top: 20px;
  left: 180px;
}

.chip6 {
  top: 150px;
  left: 90px;
}

.chip7 {
  top: 40px;
  left: 180px;
}

.chip8 {
  top: 180px;
  left: 150px;
}

.chip9 {
  top: 90px;
  left: 20px;
}

.chip10 {
  top: 200px;
  left: 60px;
}

.chip11 {
  top: 70px;
  left: 10px;
}

.chip12 {
  top: 140px;
  left: 180px;
}

.chip13 {
  top: 170px;
  left: 10px;
}

.chip14 {
  top: 40px;
  left: 140px;
}

.chip15 {
  top: 160px;
  left: 140px;
}

.chip16 {
  top: 20px;
  left: 50px;
}

.chip17 {
  top: 200px;
  left: 120px;
}

.chip18 {
  top: 100px;
  left: 70px;
}

.chip19 {
  top: 120px;
  left: 10px;
}

.chip20 {
  top: 170px;
  left: 180px;
}

.chip21 {
  top: 10px;
  left: 120px;
}

.chip22 {
  top: 50px;
  left:...