LimpKookyDeviltasmanian created by anonymous - https://repl.it/repls/LimpKookyDeviltasmanian

index.css

.error-icon {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 50%;
}

.error-face {
    display: inline-block;
    position: absolute;
    top: 27px;
    left: 27px;
    height: 37px;
    width: 37px;
    background-color: #db0a35;
    border-radius: 50%;
}

.error-face-eye {
    content: '';
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #2b2b33;
    border-radius: 50%;
}

.error-face-eye.left-eye {
    top: 10px;
    left: 8px;
}

.error-face-eye.right-eye {
    top: 10px;
    right: 8px;
}

.error-mouth {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 18px;
    height: 7px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE5cHgiIGhlaWdodD0iN3B4IiB2aWV3Qm94PSIwIDAgMTkgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuNC4yICgxNTg1NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UGF0aDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJHZW5lcmljLUF1dGgwIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAzLjAwMDAwMCwgLTEwOC4wMDAwMDApIiBmaWxsPSIjMTYyMTREIj4KICAgICAgICAgICAgPGcgaWQ9Ik92YWwtMS0rLUZpbGwtNDItKy1GaWxsLTQ0IiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NjcuMDAwMDAwLCA1OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00NS41LDQ5LjIgQzQxLjE4OTUsNDkuMiAzNy41MjY1LDUxLjkwMSAzNi4wNDY1LDU1LjY3NSBMNTQuOTUzNSw1NS42NzUgQzUzLjQ3MzUsNTEuOTAxIDQ5LjgxMDUsNDkuMiA0NS41LDQ5LjIgTDQ1LjUsNDkuMiBaIiBpZD0iUGF0aCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-size: contain;
}

.eye-blink {
  -webkit-animation-name: eye-blink;
          animation-name: eye-blink;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

@-webkit-keyframes eye-blink {
  0% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  1% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  2% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  60% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  61% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  62% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  65% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  66% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  67% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}
@keyframes eye-blink {
  0% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  1% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  2% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  60% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  61% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  62% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  65% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  66% {
    -webkit-transform: scaleX(1.3) scaleY(0);
            transform: scaleX(1.3) scaleY(0);
  }
  67% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <span class="error-icon">
      <span class="error-face">
        <span class="error-face-eye left-eye eye-blink"></span>
        <span class="error-face-eye right-eye eye-blink"></span>
        <span class="error-mouth"></span>
      </span>
    </span>
    <script src="index.js"></script>
  </body>
</html>

index.js

Empty file