Mood

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .spider { position: relative; display: inline-block; font-size: 24px; }

.leg {
  position: absolute;
  background-color: black;
  width: 3px;
  height: 20px;
  transform-origin: 50% 100%;
}

.leg1 { top: 10px; left: 5px; transform: rotate(30deg); }
.leg2 { top: 10px; left: 10px; transform: rotate(15deg); }
.leg3 { top: 10px; left: 15px; }
.leg4 { top: 10px; left: 20px; transform: rotate(-15deg); }
.leg5 { top: 10px; left: 25px; transform: rotate(-30deg); }

.leg6 { bottom: 10px; left: 5px; transform: rotate(-30deg); }
.leg7 { bottom: 10px; left: 10px; transform: rotate(-15deg); }
.leg8 { bottom: 10px; left: 15px; }
.leg9 { bottom: 10px; left: 20px; transform: rotate(15deg); }
.leg10 { bottom: 10px; left: 25px; transform: rotate(30deg); }

</style> </head> <body> <div class="spider"> <div class="leg leg1"></div> <div class="leg leg2"></div> <div class="leg leg3"></div> <div class="leg leg4"></div> <div class="leg leg5"></div> <div class="leg leg6"></div> <div class="leg leg7"></div> <div class="leg leg8"></div> <div class="leg leg9"></div> <div class="leg leg10"></div> </div> </body> </html>