3d eye | pure CSS

/*Downloaded from https://www.codeseek.co/pixelass/3d-eye-orandxa0pure-css-ZGemve */
    body { margin: 0; overflow: hidden; height: 100vh; background: black; }

// appearance
$speed: 16s;
$size: 2em;

// element counter
$stripes: 36;
$items: 18;


$alpha: 0.99;

// square size
$scale-x: 1.05;
$scale-y: 1.025;
$shape-origin: 360deg;

// math stuff
$circumference: $items*$size*2;
$diameter: $circumference/pi();
$radius: $diameter/2;

.pane {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px;
  height: $diameter;
  width: $diameter;
  margin: $diameter/-2;
  perspective: 700px;
  visibility: hidden;
 
  div {
    transform-style: preserve-3d;
  }
}

.eye {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px;
  height: $diameter;
  width: $diameter;
  margin: $diameter/-2;
  transform: rotate3d(1,1,0,-30deg); 
    
  animation: rot $speed cubic-bezier(.65,-0.25,.51,1.17) infinite;
    
  @keyframes rot {
    0%, 100% {
      transform: rotate3d(0,0,0,0deg); 
    }
    25% {
      transform: rotate3d(0,1,0,45deg); 
    }
    50% {
      transform: rotate3d(1,1,0,-25deg); 
    }
    75% {
      transform: rotate3d(1,-1,0,-25deg); 
    }
  }
  
  .stripe {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $diameter;
    width: $size;
    margin: $diameter/-2 $size/-2;
    
    @for $i from 0 to $stripes {
      &:nth-child(#{$i + 1}) {
        transform: rotate(360deg/$stripes*$i);
      }
    }
  }
  
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $size;
    width: $size;
    margin: $size/-2;
    //border-radius: 100%;
    background: rgba(#fff,0.99);
    visibility: visible;
    backface-visibility: hidden;
    
    &:before,
    &:after {
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: inherit;
      clip-path: inherit;
    }
    
    &:first-child,
    &:last-child {
      height: $size/2;
    }
    



    @for $i from 0 to ($items + 1) {
      &:nth-child(#{$i + 1}) {
        $width: abs($size*sin($shape-origin/$stripes*$i));
        $prev-width: abs($size*sin($shape-origin/$stripes*($i + 1)));

        @if $i == 0 or $i == ($items + 1) {
          $width: 0;
        }
        @if $i > ceil($items/2) + 1 {
          $prev-width: abs($size*sin($shape-origin/$stripes*($i - 1)));
        }
        @if $i == ceil($items/2) + 1 {
          $prev-width: $width;
        }
        $gap: ($prev-width - $width)/2;
        width: $prev-width;
        margin-left: $prev-width/-2;

        @if $i > $items/2 {
          clip-path: polygon(
            $gap 0%,
            0% 100%,
            100% 100%,
            $prev-width - $gap 0%,
            $gap 0%
          );
        }
        @if $i < $items/2 {
          clip-path: polygon(
            0% 0%,
            $gap 100%,
            $prev-width - $gap 100%,
            100% 0%,
            0% 0%
          );
        }
        $step: 100/$items*1.9;
        background: linear-gradient(to top, 
          hsla(0,0%,max(10%,100% - $i*$step),$alpha),
          hsla(0,0%,max(10%,100% - ($i + 1)*$step),$alpha));
        transform: 
          rotateX(180deg/$items*$i)
          translateZ($radius) scale($scale-x,$scale-y);
      }
    }
    
    &:nth-child(1) {
      background: rgba(#000,$alpha);
    }
    &:nth-child(2) {
      &:before, &:after {
        display: none;
      }
      background: 
        linear-gradient(to top, 
          rgba(#515B1F,$alpha) 0%, 
          rgba(#816B4F,$alpha) 80%);
    }
    &:nth-child(3) {
      &:before, &:after {
        display: none;
      }
      background: 
        linear-gradient(to top, 
          rgba(#816B4F,$alpha) 20%, 
          rgba(#2C3E2E,$alpha) 100%);
      box-shadow: inset 0 2px 0 -1px rgba(#000,0.5);
    }
  }
}

/*Downloaded from https://www.codeseek.co/pixelass/3d-eye-orandxa0pure-css-ZGemve */