Pure CSS Gritty

index.haml

#grid
 -15.times do
  .block
 .wrap
  .helmet
  .head
   .mouth
    .tongue
   -2.times do
    .eye
     -15.times do
      .hair
   .chin
   .left
    -50.times do
     .hair
   .right
    -50.times do
     .hair
   .center
    -15.times do
     .hair

pure-css-gritty.markdown

Pure CSS Gritty

cursor tracking antifa hero Gritty in pure CSS

A Pen by Adam Kuhn on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

$lo:#fcb32c;
$do: darken($lo, 50%);
$o: #b92403;

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100vw;
  overflow:hidden;
  background:radial-gradient(circle at center, #333, #000);
  #grid{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns: 20vw 20vw 20vw 20vw 20vw;
    .block{
      position:relative;
      z-index:600;
      &:first-of-type:hover ~ .wrap .head .eye:before{ transform:translateX(-10px) translateY(0px);
      }
      &:nth-of-type(2):hover ~ .wrap .head .eye:before{ transform:translateX(-7.5px) translateY(-5px);
      }
      &:nth-of-type(3):hover ~ .wrap .head .eye:before{ transform:translateX(-7.5px) translateY(-7.5px);
      }
      &:nth-of-type(4):hover ~ .wrap .head .eye:before{ transform:translateX(-5px) translateY(-10px);
      }
      &:nth-of-type(5):hover ~ .wrap .head .eye:before{ transform:translateX(0px) translateY(-10px);
      }
      &:nth-of-type(6):hover ~ .wrap .head .eye:before{ transform:translateX(-10px) translateY(8px);
      }
      &:nth-of-type(7):hover ~ .wrap .head .eye:before{ transform:translateX(-5px) translateY(5px);
      }
      &:nth-of-type(9):hover ~ .wrap .head .eye:before{ transform:translateX(2.5px) translateY(-5px);
      }
      &:nth-of-type(10):hover ~ .wrap .head .eye:before{ transform:translateX(8px) translateY(-9px);
      }
      &:nth-of-type(11):hover ~ .wrap .head .eye:before{ transform:translateX(0px) translateY(8px);
      }
      &:nth-of-type(12):hover ~ .wrap .head .eye:before{ transform:translateX(4px) translateY(5px);
      }
      &:nth-of-type(13):hover ~ .wrap .head .eye:before{ transform:translateX(5px) translateY(4px);
      }
      &:nth-of-type(14):hover ~ .wrap .head .eye:before{ transform:translateX(9px) translateY(-2px);
      }
      &:nth-of-type(15):hover ~ .wrap .head .eye:before{ transform:translateX(10px) translateY(-4px);
      }
      
    }
  }
  .wrap{
    opacity:1;
    height:450px;
    width:700px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    z-index:2;
    opacity:1;
    &.fade{
      opacity:0.5;
    }
    .helmet{
      position:absolute;
      width:185px;
      height:100px;
      background:#000;
      left:250px;
      overflow:hidden;
      z-index:0;
      top:40px;
      opacity:1;
      border-radius:500px 500px 0 0 / 650px 650px 0 0;
      transform:rotate(-5deg);
      box-shadow:inset -3px 5px 30px rgba(255,255,255,0.15);
      &:before, &:after{
        content:'';
        width:35px;
        height:12px;
        position:absolute;
        box-shadow:5px 0px 20px rgba(255,255,255,0.75), 5px -12px 5px #000, 10px -20px 5px -2px rgba(255,255,255,0.45);
        border-radius:5px;
        filter:blur(1px);
        left:25px;
        bottom:40px;
        transform:rotate(-10deg);
      }
      &:after{
        left:120px;
        bottom:40px;
        transform:scale(1.1) scaleX(-1) rotate(-10deg);
        filter:blur(2px);
        width:40px;
      }
    }
    .head{
      position:absolute;
      width:250px;
      height:350px;
      left:220px;
      top:100px;
      z-index:2;
      &:before{
        content:'';
        position:absolute;
        width:95%;
        height:85%;
        left:6%;
        top:2.5%;
        border-radius:500px 500px 600px 600px / 500px 500px 800px 800px; 
        background:#222;
        filter:blur(5px);
      }
      .mouth{
        position:absolute;
        width:122.5px;
        height:30px;
        top:80px;
        left:70px;
        z-index:7;
        border-radius:0 0 400px 400px / 0 0 180px 180px;
        border-bottom:20px solid #000;
        box-shadow:0 5px 0 #000, inset -10px -5px 0 -15px #000;
        transform:rotate(-7deg);
        .tongue{
          position:absolute;
          width:35px;
          height:35px;
          box-shadow:0 5px 0 red;
          border-radius:50% / 20%;
          filter:blur(2px);
          left:40px;
          top:15px;
          opacity:0.75;
          &:before, &:after{
            content:'';
            position:absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 20px 15px;
            border-color: transparent transparent #222 transparent;
            top:-18px;
            left:2.5px;
            filter:blur(2px);
          }
          &:after{
            border-width: 20px 0 0 15px;
            border-color: transparent transparent transparent #222;
            left:22.5px;

          }
        }
        &:after{
          content:'';
          position:absolute;
          width:calc(100% + 20px);
          height:25px;
          top:0px;
          left:-10px;
          border-radius:50px;
          background:repeating-linear-gradient(to right, $o, $o 2.5px, lighten($o, 20%) 2.5px, lighten($o, 20%) 2.5px, $o 6px, $o 6px, lighten($o, 20%) 6px, lighten($o, 20%) 6.5px, $o 6.5px );
          opacity:0.5;
          filter:blur(2px);
          
        }
        &:before{
          content:'';
          position:absolute;
          width:122.5px;
          height:30px;
          top:33px;
          left:0;
          z-index:9;
          border-radius:0 0 400px 400px / 0 0 180px 180px;
          box-shadow:0 1px 20px -2px darken($lo, 10%), inset 0 -1px 5px -2px darken($lo, 5%), inset -10px -5px 0 -15px $o, inset 0 -7px 10px $o, inset 0 -10px 0 ;
          transform:scaleX(1) scaleY(1.5);
          z-index:-1;
        }
      }
      .eye{
        position:absolute;
        width:45px;
        height:45px;
        z-index:9;
        background:#fff;
        border-radius:50px 35px 50px 40px;
        left:68px;
        opacity:0.5;
        top:40px;
        transform:rotate(45deg);
        box-shadow:inset -1px 0 0 2px #000, inset -5px 5px 30px #555, 5px 5px 10px 1px $o, 9px 3px 10px 0 $do, -10px 20px 10px $o;
        &:before{
          content:'';
          position:absolute;
          width:10px;
          height:10px;
          background:#000;
          border-radius:100%;
          top:19px;
          left:19px;
          box-shadow:0 0 0 3px $lo, 0 0 0 4px $o, 0 0 0 5px #000;
          transition:0.35s ease-in-out;
        }
        &:nth-of-type(2){
          height:47.5px;
          width:47.5px;
          border-radius:50px 40px 50px 30px;
          left:135px;
          top:32px;
          box-shadow:inset -1px 0 0 3px #000, inset 5px -5px 30px #555, 5px 5px 10px 1px $o, 9px 4px 15px 0 $do, 15px -10px 15px $o;
          &:before{
            transition:0.3s ease-in-out;
          }
          .hair{
            @for $i from 1 through 15{
            &:nth-of-type(#{$i}){
              transform:scaleX(-1) rotate(#{($i * 7.5) + 45}deg);
            }
          }
          }
        }
        .hair{
          position:absolute;
          width:20px;
          height:50px;
          border-radius:75px 0 0 0 / 120px 0 0 0;
          box-shadow:-0.25px -1px 0 -0.25px $lo;
          z-index:-1;
          transform-origin:50px 20%;
          left:-25px;
          top:20px;
          filter:blur(0.75px);
          &:before{
            content:'';
            position:absolute;
            width:inherit;
            height:inherit;
            box-shadow:inherit;
            border-radius:inherit;
            left:5px;
            top:-5px;
            opacity:0.75;
              
          }
          &:nth-of-type(2n){
            height:60px;
            box-shadow:-0.5px -1.5px 0 darken($lo, 5%);
          }
          &:nth-of-type(3n){
            height:55px;
            box-shadow:-0.5px -1.5px 0 darken($lo, 10%);
          }
          @for $i from 1 through 15{
            &:nth-of-type(#{$i}){
              transform:rotate(#{($i * 7.5) - 25}deg);
            }
          }
        }
      }
      .chin{
        position:absolute;
        width:95%;
        height:85%;
        left:6%;
        top:2.5%;
        
        border-radius:500px 500px 600px 600px / 500px 500px 800px 800px; 
        z-index:2;
        opacity:0.9;
        &:before, &:after{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          top:-5px;
          left:0;
          border-radius:inherit;
          box-shadow:inset 0 -100px 100px $lo, inset 0 -250px 100px $o, 0 10px 20px $lo;
          filter:blur(3px);
        }
        &:before{
          background:darken($o, 20%);
        }
        &:after{
          width:102.5%;
          left:-1.25%;
          box-shadow:none;
          top:7.5px;
          z-index:-1;
          filter:blur(1px);
          background:repeating-linear-gradient(to right, $lo, $lo 2px, #222 2px, #222 2.5px, $lo 2.5px, $lo 4px, #222 4px, #222 4.5px, $lo 4.5px, $lo 6px);
        }
      }
      .left, .right, .center{
        height:150px;
        width:20px;
        position:absolute;
        bottom:40px;
        right:50%;
        border-radius:100px 0 0 0 / 300px 0 0 0;
        z-index:1;
        .hair{
          height:inherit;
          width:inherit;
          position:inherit;
          bottom:0;
          border-radius:inherit;
          box-shadow:-0.5px -5px 0 $lo;
          z-index:2;
          filter:blur(0.5px);
          &:before{
            content:'';
            position:absolute;
            width:10px;
            height:50%;
            bottom:-1%;
            border-radius:inherit;
            box-shadow:inherit;
            z-index:-1;
            filter:brightness(0.9);
          }
          &:after{
            content:'';
            position:absolute;
            width:10px;
            height:40%;
            bottom:100%;
            border-radius:inherit;
            box-shadow:inherit;
            z-index:-1;
          }
          &:nth-of-type(2n){
            height:160px;
          }
          &:nth-of-type(3n){
            height:100px;
          }
          &:nth-of-type(4n){
            height:130px
          }
          &:nth-of-type(5n){
            height:140px;
          }
          @for $i from 1 through 50{
            &:nth-of-type(#{$i}){
              right:#{$i * 2}px;
              top:#{$i * -1}px;
              transform:rotate(#{$i/6}deg);
            }
            &:before{
                transform:rotate(#{$i/-2}deg);
                right:#{$i * -0.45}px;
              }
              &:after{
                right:#{$i * 1}px;
                transform:rotate(#{$i/2}deg);
                bottom:calc(#{$i - 50}px + 100%);
              }
          }
          @for $i from 35 through 50{
            &:nth-of-type(#{$i}){
              right:#{$i * 2}px;
              top:#{$i * -1}px;
              transform:rotate(#{$i/2}deg);
              border-radius:100px  0 100px 100px / 300px 0 300px 600px;
              
            }
          }
        }
      }
      
      .right{
        transform:scaleX(-1);
        right:40%;
      }
      .center{
        left:60.5%;
        .hair{
          border-radius:0px;
          @for $i from 1 through 15{
            &:nth-of-type(#{$i}){
              right:#{$i * 3.5}px;
              top:0;
              transform:rotate(#{$i/6}deg);
              border-radius:0px;
              box-shadow:none;
              border-left:0.5px solid $lo;
              box-shadow:0 -4px 10px $lo;
              opacity:1;
            }
          }
        }
      }
    }
  }
}