<div class="monster"></div>
.monster {
  position: fixed;
  inset: -4%;
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.00019%) 50% 50%/3000px 3000px,   
    repeating-conic-gradient(#000 0 0.00015%,#fff 0 0.0002%) 50% 50%/4000px 3000px,
    radial-gradient(700px,#fff 20%,#0000);
  background-blend-mode: difference;
  filter: blur(2px) contrast(8) brightness(74);
  animation: a .3s infinite linear;
  -webkit-mask: radial-gradient(700px, #000 20%,#0000 67%);
  mix-blend-mode: darken;
}
@keyframes a {
  100% {
    filter: blur(3px) contrast(8) brightness(74);
    background-position: 50.5% 51%;
    transform: translate(1px, 2px) rotate(.5deg);
  }
}

.monster:before {
  content: "";
  position: absolute;
  width: 350px;
  height: 150px;
  inset: 0;
  margin: auto;
  transform: translateY(50%);
  clip-path: polygon(2% 15%,19% 43%,19% 26%,39% 51%,41% 33%,52% 45%,63% 29%,66% 46%,80.5% 24%,81% 41%, 98% 6%,82% 78%,79% 58%,65% 85%,63% 64%,48% 91%,35% 68%,35% 88%,21% 64%,21% 79%);
  background: #000;
}

.monster:after {
  content: "";
  position: absolute;
  width: 315px;
  height: 90px;
  inset: 0;
  margin: auto;
  transform: translateY(-80%);
  background: 
    radial-gradient(86px 80% at 21% 42%, #000 20%,#fff 21% 40%,#0000 41%),
    radial-gradient(86px 80% at 80% 42%, #000 20%,#fff 21% 40%,#0000 41%), 
    #000;
  -webkit-mask: radial-gradient(49% 171% at 50% -7%,#000 98%,#0000);
  clip-path: polygon(1% -2%,42% 89%,57% 89%,100% -2%,100% 100%,57% 89%,42% 89%,0 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #ECE5CE;
}

html {
  background: #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.