.turtle {
  position: relative;
  margin: 1em;
  width: 200px;
  height: 300px;
}
.turtle:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#222 50%, transparent 51%), radial-gradient(#222 50%, transparent 51%), radial-gradient(rgba(0, 0, 0, 0.3) 50%, transparent 51%), radial-gradient(#326765 50%, transparent 51%), radial-gradient(#7da87b 50%, transparent 51%);
  background-position: 44% 8%, 54% 8%, 50% 50%, 50% 50%, 50% 0%;
  background-size: 6px 6px, 6px 6px, 110% 80%, 140% 100%, 40% 30%;
  background-repeat: no-repeat;
}
.turtle:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#7da87b 50%, transparent 51%), radial-gradient(#7da87b 50%, transparent 51%), radial-gradient(#7da87b 50%, transparent 51%), radial-gradient(#7da87b 50%, transparent 51%);
  background-size: 50px 100px, 50px 100px,50px 100px,50px 100px;
  background-repeat: no-repeat;
  background-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
}

html {
  height: 100%;
  display: -webkit-box;
  display: flex;
}

body {
  position: relative;
  margin: auto;
  background: #efefef;
  display: -webkit-box;
  display: flex;
}

@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: sepia(0) saturate(2);
            filter: sepia(0) saturate(2);
  }
  50% {
    -webkit-filter: sepia(1) saturate(8);
            filter: sepia(1) saturate(8);
  }
  100% {
    -webkit-filter: sepia(0) saturate(2);
            filter: sepia(0) saturate(2);
  }
}

@keyframes filter-animation {
  0% {
    -webkit-filter: sepia(0) saturate(2);
            filter: sepia(0) saturate(2);
  }
  50% {
    -webkit-filter: sepia(1) saturate(8);
            filter: sepia(1) saturate(8);
  }
  100% {
    -webkit-filter: sepia(0) saturate(2);
            filter: sepia(0) saturate(2);
  }
}