Coccinella

HTML

<div class="lady-bug">
    <div class="lady-bug__body">
        <div class="lady-bug__dots lady-bug__dots--top-left lady-bug__dots--medium"></div>
        <div class="lady-bug__dots lady-bug__dots--top-right"></div>
        <div class="lady-bug__dots lady-bug__dots--bottom-right lady-bug__dots--small"></div>
        <div class="lady-bug__dots lady-bug__dots--bottom-left"></div>
        <div class="lady-bug__dots lady-bug__dots--center lady-bug__dots--big"></div>
        <div class="lady-bug__dots lady-bug__dots--top-edge lady-bug__dots--big"></div>
        <div class="lady-bug__dots lady-bug__dots--bottom-edge lady-bug__dots--extra-big"></div>
    </div>
    <div class="lady-bug__paws lady-bug__paws--top-left"></div>
    <div class="lady-bug__paws lady-bug__paws--top-right"></div>
    <div class="lady-bug__paws lady-bug__paws--bottom-left"></div>
    <div class="lady-bug__paws lady-bug__paws--bottom-right"></div>
    <div class="lady-bug__head">
        <div class="lady-bug__eyes lady-bug__eyes--top">
            <div class="lady-bug__eyes-pupils"></div>
        </div>
        <div class="lady-bug__eyes lady-bug__eyes--bottom">
            <div class="lady-bug__eyes-pupils"></div>
        </div>
    </div>
</div>

SCSS

.lady-bug {
  width: 240px;
  height: 240px;
  position: relative;
  overflow: hidden;
  margin: auto;
  &__head {
    background: black;
    height: 35%;
    width: 35%;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 0;
    border: solid 1px black;
    overflow: hidden;
    box-shadow: inset 30px 20px 20px rgba(255,255,255,0.3);
  }
  &__eyes {
    height: 32%;
    width: 30%;
    background: white;
    position: absolute;
    border-radius: 50%;
    right: -5%;

    &-pupils {
      height: 50%;
      width: 50%;
      background: black;
      position: absolute;
      border-radius: 50%;
      top: 25%;
      right: 10%;
    }
    &--top {
      top: 15%;
    }
    &--bottom {
      bottom: 15%;
    }
  }
  &__paws {
    width: 17%;
    height: 3%;
    background: black;
    border-radius: 5px;

    &--top-left {
      transform: rotate(35deg);
      position: absolute;
      top: 10%;
      left: 5%;
      animation: paw-movement-positive 2s linear infinite;
    }
    &--bottom-left {
      transform: rotate(-35deg);
      position: absolute;
      bottom: 35%;
      left: 5%;
      animation: paw-movement-negative 2s linear infinite;
    }
    &--top-right {
      transform: rotate(-35deg);
      position: absolute;
      top: 10%;
      right: 20%;
      animation: paw-movement-negative 2s linear infinite;
    }
    &--bottom-right {
      transform: rotate(35deg);
      position: absolute;
      bottom: 35%;
      right: 20%;
      animation: paw-movement-positive 2s linear infinite;
    }
    @keyframes paw-movement-negative {
      0% {transform: rotate(-45deg)}
      50% {transform: rotate(-15deg)}
      100% {transform: rotate(-45deg)}
    }
    @keyframes paw-movement-positive {
      0% {transform: rotate(45deg)}
      50% {transform: rotate(15deg)}
      100% {transform: rotate(45deg)}
    }
  }
  &__body {
    background: red;
    width: 85%;
    height: 75%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    z-index: 9;
    border: solid 1px black;
    box-shadow:
            inset 20px 20px 20px rgba(0,0,0,0.6),
            inset -10px -10px 15px rgba(255, 250, 6, 0.4);
  }
  &__dots {
    background: black;
    height: 8%;
    width: 8%;
    border-radius: 50%;
    position: absolute;

    &--extra-big {
      height: 35%;
      width: 35%;
    }
    &--big {
      height: 25%;
      width: 25%;
    }
    &--medium {
      height: 15%;
      width: 15%;
    }
    &--small {
      height: 10%;
      width: 10%;
    }
    &--top-edge {
      top: -10%;
      left: 37%;
    }
    &--bottom-edge {
      bottom: -15%;
      left: 32%;
    }
    &--center {
      top: 40%;
      left: 26%;
    }
    &--top-left {
      top: 20%;
      left: 20%;
    }
    &--top-right {
      top: 27%;
      right: 25%;
    }
    &--bottom-right {
      bottom: 27%;
      right: 21%;
    }
    &--bottom-left {
      bottom: 20%;
      left: 26%;
    }
  }
}