CodePen Embed - Snail

<html>
  <body>
    <div id='illustration'>
      <div class="snail-container">
        <div class="snail">
          <div class="shell">
            <div class="main">
              <div class="spiral">
                <div class="outer-outer">
                  <div class="outer-inner">
                    <div class="inner-outer">
                      <div class="inner-inner">
          
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="opening">
              <div class="concave-cut-out-bg"></div>
              <div class="concave-cut-out-shape"></div>
            </div>
          </div>
          <div class="body">
            <div class="head">
              <div class="face">
                <div class="eyes">
                  <div class="left"><span></span></div>
                  <div class="right"><span></span></div>
                </div>
                <div class="mouth">
                  <div class="innermouth">
                    
                  </div>
                  
                </div>
              </div>
              <div class="antennas">
              <div class="left"><div class="slope"></div></div>
              <div class="right"><div class="slope"></div></div>
            </div>
            </div>
            
            <div class="lower-body"></div>
          </div>
        </div>
      </div>
    
    </div>
      <div class="grass">
        <div class="blade  foliage"><span></span></div>
        <div class="blade foliage "><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade foliage"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
        <div class="blade"><span></span></div>
      </div>

    <style>
      
    </style>
  </body>
</html>


$snailSkin: #afb42b;
$shell: burlywood;
$eye: #4e342e;
$bg:darken( $snailSkin, 15%);
$bg-gradient: linear-gradient(darken($bg, 2%) 1%, $bg 99%);

$foliage:darken($snailSkin, 25%);
.darkenFoliage{
  background:darken($foliage,3%);
    span{
      background:darken($foliage,3%);
      &:after,&:before{
        background:darken($foliage,3%);
      }
    }
}
.furtherDarkenFoliage{
  background:darken($foliage,6%);
    span{
      background:darken($foliage,6%);
      &:after,&:before{
        background:darken($foliage,6%);
      }
    }
}
//animation timing
$snailWalkTime: 4s;

body,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body * {
  box-sizing: inherit;
}
body{
  width:100vw;
  height:100vh;
  overflow:hidden;
    background-image: $bg-gradient;
}
#illustration {
  display: flex;
  z-index: -5;
  height: 100vh;
  width: 100vw;
  justify-content: flex-start;
  overflow: hidden;
  align-items: center;
}
.snail-container {
  animation: snailMovement 40s infinite;
  position: relative;
  width: 400px !important;
  height: 400px;
  .snail {
    bottom: 0;
    height: 75%;
    width: 100%;
    position: absolute;
    &:after{
      content:"";
      width:60%;
      height:8%;
      background:rgba(0,0,0,0.2);
      bottom:-4.5%;
      right:22%;
      position:absolute;
      border-radius:50%;
      z-index:-1;
      animation:snailShadow 4s infinite;
    }
  }
}
.shell {
  height: 55%;
  position: absolute;
  width: 50%;
  bottom: 3%;
  animation: snailShell 4s infinite;
  z-index: 5;
  right: 29%;
  .main {
    background: $shell;
    width: 90%;
    height: 100%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 30%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .spiral {
      position: relative;
      width: 65%;
      height: 65%;
      background: darken($shell, 10%);
      z-index: 3;
      border-radius: 50%;
    }
    .outer-outer {
      background: $shell;
      width: 65%;
      height: 65%;
      position: absolute;
      border-radius: 50%;
      left: 17.5%;
      top: 17.5%;
      z-index: 4;
    }
    .outer-inner {
      background: darken($shell, 10%);
      width: 65%;
      height: 65%;
      position: absolute;
      border-radius: 50%;
      left: 17.5%;
      top: 17.5%;
      z-index: 4;
    }
    .inner-outer {
      background: $shell;
      width: 35%;
      height: 35%;
      position: absolute;
      border-radius: 50%;
      left: 32.5%;
      top: 32.5%;
      z-index: 4;
    }
  }
  .opening {
    width: 60%;
    height: 30%;
    background: $shell;
    position: absolute;
    bottom: 0%;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 0.5rem;
    right: 0;
    .concave-cut-out-bg {
      width: 25%;
      height: 60%;
      position: absolute;
      bottom: 68%;
      left: 68%;
      transform: rotate(-45deg);
      background: $shell;
    }
    .concave-cut-out-shape {
      width: 14.5%;
      height: 40%;
      right: 2%;
      border-bottom-left-radius: 50%;
      bottom: 100%;
      background: $bg;
      position: absolute;
    }
  }
}
.body {
  .head {
    &:after {
      content: "";
      z-index: 1;
      background: $bg;
      width: 60%;
      height: 30%;
      position: absolute;
      bottom: 38.66%;
      border-radius: 50%;
      left: -59.6%;
    }
    &:before {
      content: "";
      z-index: 0;
      background: $snailSkin;
      width: 90%;
      height: 50%;
      position: absolute;
      bottom: 0;
      border-radius: 20px;
      left: -50%;
    }
    position: absolute;
    background: $snailSkin;
    width: 15%;
    animation: snailHead $snailWalkTime infinite;
    height: 40%;
    right: 14%;
    bottom: 0%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 120%;
    z-index: 2;
    .face {
      position: absolute;
      top: 0;
      width: 85%;
      border-radius: 50%;
      height: 60%;
      left: 15%;
      .eyes {
        .left,
        .right {
          position: absolute;
          top: 25%;
          background: #ffffff;
          border-radius: 5rem;
          width: 2rem;
          height: 3rem;
          span {
            width: 1rem;
            top: 35.5%;
            left: 39%;
            height: 1rem;
            position: absolute;
            border-radius: 50%;
            background: $eye;
          }
        }
        .right {
          right: 0;
        }
        .left {
          left: 0;
        }
      }
      .mouth {
        .innermouth {
          position: absolute;
          bottom: 5%;
          left: 14px;
          width: 40%;
          animation: snailMouth $snailWalkTime infinite;
          height: 20%;
          background: #ff9e80;
          border-radius: 0.6rem;
          transform: skewx(-10deg);
          z-index: 4;
          border-bottom: 1px solid #bf360c;
          border-top: 1px solid #fff;
        }
      }
    }
    .antennas {
      width: 50px;
      height: 50px;
      position: absolute;
      top: -30%;
      z-index: -10;
      
      right: 10%;
      .left,
      .right {
        border-bottom: 5rem solid $snailSkin;
        border-left: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        height: 0;
        width: 30%;
        position: absolute;
        top: 0;
        &:before {
          background: $snailSkin;
          border-radius: 50%;
          width: 275%;
          height: 1.5rem;
          top: -0.7rem;
          left: -0.5em;
          position: absolute;
          content: "";
        }
        .slope {
          background: $snailSkin;
          width: 155%;
          height: 1.5rem;
          bottom: -4rem;
          left: 0.1rem;
          position: absolute;
          transform: rotate(-25deg);
        }
      }
      .right {
        right: 10%;
        .slope {
          left: -0.4rem;
          transform: rotate(25deg);
        }
      }
    }
  }

  .lower-body {
    background: $snailSkin;
    position: absolute;
    height: 11%;
    width: 65%;
    border-top-left-radius: 290%;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 50px;
    bottom: 0;
    right: 20%;
    animation: snailTail $snailWalkTime infinite;
  }
}

@keyframes snailMovement {
  0% {
    transform: translate3d(0vw, 0, 0);
  }
  5% {
    transform: translate3d(10vw, 0, 0);
  }
  10% {
    transform: translate3d(10vw, 0, 0);
  }
  15% {
    transform: translate3d(20vw, 0, 0);
  }
  20% {
    transform: translate3d(20vw, 0, 0);
  }
  25% {
    transform: translate3d(30vw, 0, 0);
  }
  30% {
    transform: translate3d(30vw, 0, 0);
  }
  35% {
    transform: translate3d(40vw, 0, 0);
  }
  40% {
    transform: translate3d(40vw, 0, 0);
  }
  45% {
    transform: translate3d(50vw, 0, 0);
  }
  50% {
    transform: translate3d(50vw, 0, 0);
  }
  55% {
    transform: translate3d(60vw, 0, 0);
  }
  60% {
    transform: translate3d(60vw, 0, 0);
  }
  65% {
    transform: translate3d(70vw, 0, 0);
  }
  70% {
    transform: translate3d(70vw, 0, 0);
  }
  75% {
    transform: translate3d(80vw, 0, 0);
  }
  80% {
    transform: translate3d(80vw, 0, 0);
  }
  85% {
    transform: translate3d(90vw, 0, 0);
  }
  90% {
    transform: translate3d(90vw, 0, 0);
  }
  95% {
    transform: translate3d(100vw, 0, 0);
  }
  100% {
    transform: translate3d(100vw, 0, 0);
  }
}

@keyframes snailTail {
  0% {
    width: 55%;
  }
  50% {
    width: 65%;
  }
  100% {
    width: 55%;
  }
}
@keyframes snailHead {
  0% {
    transform: rotate(0deg) translate3d(0rem, 0, 0);
  }
  50% {
    transform: rotate(3deg) translate3d(1rem, 0, 0);
  }
  100% {
    transform: rotate(0deg) translate3d(0rem, 0, 0);
  }
}
@keyframes snailShell {
  0% {
    transform: translate3d(0, -1rem, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(1deg);
  }
  100% {
    transform: translate3d(0, -1rem, 0) rotate(0deg);
  }
}
@keyframes snailMouth {
  0% {
    width: 40%;
    left: 14px;
  }
  50% {
    width: 20%;
    left: 20px;
  }

  100% {
    width: 40%;
    left: 14px;
  }
}
@keyframes snailShadow{
  0%{
    width:55%;
    transform:translate3d(0rem, 0 , 0) scaleY(1.5)
  }
  50%{
    width:65%;
    transform:translate3d(.5rem, 0 , 0) scaleY(1);
  }
  100%{
    width:55%;
    transform:translate3d(0rem, 0 , 0) scaleY(1.5)
  }
}
.grass{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  .blade:nth-child(2){
    transform: rotate(0deg);
    left:28%;
    
  }
  .blade:nth-child(3){
    transform: scale(.7) translate3d(0,-3rem,0) rotate(-20deg);
  }
  .blade:nth-child(4){
    left:90%;
    transform: scale(1.4) translate3d(0,-1rem,0) rotate(20deg);
    background:darken($foliage,3%);
    span{
      background:darken($foliage,3%);
      &:after,&:before{
        background:darken($foliage,3%);
      }
    }
  }
  .blade:nth-child(5){
    left:85%;
    transform: translate3d(0,-2rem,0) rotate(28deg);
  }
  .blade:nth-child(6){
    left:55%;
    z-index:1;
    transform:scale(.7) translate3d(0,-4rem,0) rotate(-28deg);
  }
  .blade:nth-child(7){
    left:55%;
    z-index:0;
    transform:scale(.9) translate3d(-3rem,-5rem,0) rotate(8deg);
    @extend .darkenFoliage;
  }
  .blade:nth-child(8){
    left:45%;
    z-index:-1;
    transform:scale(1.4) translate3d(-3rem,-5rem,0) rotate(7deg);
    @extend .furtherDarkenFoliage;
  }
  .blade:nth-child(1){
    transform: rotate(30deg);
    left:20%;
    background:darken($foliage,3%);
    span{
      background:darken($foliage,3%);
      &:after,&:before{
        background:darken($foliage,3%);
      }
    }
  }
  .foliage{
    
    width:14rem;
    height:15rem;
    border-radius:20px;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    &:after{
      content:'';
      position:absolute;
      width:.5rem;
      border-radius:50%;
      left:49%;
      z-index:9;
      height:160%;
      background:darken($foliage, 10%);
    }
    span{
      position:absolute;
      width:10%;
      height:100%;
      bottom:-70%;
      
      background:$foliage;
      left:45%;
      &:before, &:after{
        content:"";
        height:15rem;
        width:7.0rem;
        background:$foliage;
        position:absolute;
        top:0rem;
        left:.8rem;
        transform:rotate(-1deg);
        border-bottom-right-radius:250%;
      }
      &:before{
        content:"";
        left:-6.4rem;
        width:6.6rem;
        transform:rotate(1deg);
        border-bottom-right-radius:0%;
        border-bottom-left-radius:250%;
        
        z-index:1;
      }
    }

    background:$foliage;
    position:absolute;
    top:-2rem;
  }
}

View Compiled

This Pen is owned by Josh Kennedy on CodePen.

See more by @joshonweb on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.