SOURCE

<div class="container">
  <div class="eye">
    <div class="iris">
      <div class="iris-1">
        <div class="iris-2">
          <div class="pupil"></div>
          <div class="iris-mark iris-mark-1">,</div>
          <div class="iris-mark iris-mark-2">,</div>
          <div class="iris-mark iris-mark-3">,</div>
        </div>
      </div>
    </div>
    <div class="brightness"></div>
    <div class="brightness--1"></div>
  </div>
</div>

$irisSize: 11em;
$red: #b00000;

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
  text-rendering: optimizeLegibility;
}

.container {
  .eye {
    position: relative;
    width: 12em;
    height: 20em;
    margin: 0 auto;
    border-radius: 100% 0px;
    transform: rotate(75deg);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 8px solid #1e1f26;
    overflow: hidden;
    box-shadow: 5px 17px 20px 4px #210000;
    animation: open 0.4s;

    &:before {
      content: "";
      width: 12em;
      height: 23em;
      position: absolute;
      border-radius: 100%;
      background-color: white;
      box-shadow: inset 20px -2px 20px 0px lightgrey;
      transform: rotate(30deg);
      z-index: 1;
    }

    &:after {
      content: "";
      width: 24em;
      height: 24em;
      position: absolute;
      border-radius: 100%;
      background-color: white;
      box-shadow: inset -3px 4px 20px 0px lightgray;
    }

    &:hover {
      .pupil {
        width: 2.7em;
        height: 2.7em;
      }

      .brightness {
        width: 1.9em;
        height: 2.9em;

        &--1 {
          top: 11.1em;
          left: 7em;
        }
      }
    }

    .pupil {
      width: 3em;
      height: 3em;
      background-color: black;
      border-radius: 100%;
      box-shadow: 0px 0px 20px 0px;
      transition-duration: 0.5s;
      position: relative;
    }

    .iris {
      width: $irisSize;
      height: $irisSize;
      background-color: $red;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      z-index: 1;
      box-shadow: 0px 0px 20px 0px #8b451391;
      margin-bottom: 3em;
      margin-right: 3em;
      border: 8px solid #770707;
      animation: rotateIris 1.4s;

      &-1 {
        height: $irisSize;
        width: $irisSize;
        box-shadow: 0 0 1px 1px $red;
        background: linear-gradient(
          90deg,
          $red 1%,
          $red 22%,
          $red 50%,
          $red 76%,
          $red 99%
        );
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
      }

      &-2 {
        height: $irisSize - 5;
        width: $irisSize - 5;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        border: 4px solid #870000;
        position: relative;
      }

      &-mark {
        position: absolute;
        font-size: 8em;
        text-shadow: 0 1px 8px #fd0404;

        &-1 {
          left: 0.2em;
          bottom: -0.25em;
          transform: rotate(30deg);
        }

        &-2 {
          bottom: 0;
          left: 0.45em;
          transform: rotate(-40deg);
        }

        &-3 {
          bottom: -0.1em;
          left: 0.2em;
          transform: scaleY(-1);
        }
      }
    }

    .brightness {
      width: 2em;
      height: 3em;
      background-color: white;
      position: absolute;
      z-index: 1;
      top: 5em;
      border-radius: 14px 31px 10px 7px / 68px 28px 4px 9px;
      opacity: 0.8;
      transition-duration: 0.4s;

      &--1 {
        position: absolute;
        width: 1em;
        height: 2em;
        top: 11em;
        left: 7em;
        background-color: white;
        box-shadow: none;
        z-index: 1;
        border-radius: 27px 26px 23px 9px / 92px 58px 43px 14px;
        opacity: 0.8;
        transition-duration: 0.4s;
      }
    }
  }
}

@keyframes open {
  from {
    height: 0em;
    transform: rotate(0deg);
  }
  to {
  }
}

@keyframes rotateIris {
  from {
    transform: rotate(-0deg);
  }
  to {
    transform: rotate(360deg);
  }
}