<article class="haunted" role="img" aria-label="cartoon of a haunted house"></article>

body {
  background: #247;
}

.haunted {
  width: 90vmin;
  height: 90vmin;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background:
    /* house top*/
    linear-gradient(#000 0 0) 50% 0 / 0.5% 4%,
    linear-gradient(#000 0 0) 50% 1% / 3% 0.4%,
    conic-gradient(at 100% 50%, #0000 240deg, #000 0 300deg, #0000 0) 52% 0.6% / 1.25% 1.25%,
    conic-gradient(at 100% 50%, #0000 240deg, #000 0 300deg, #0000 0) 48% 0.66% / 2% 1%,
    /* clouds */
    radial-gradient(farthest-side at 50% 200%, gray 99%, #0000 0) 10% 10% / 25% 7%,
    radial-gradient(farthest-side at 50% 200%, gray 99%, #0000 0) 0% 10% / 15% 7%,
    radial-gradient(farthest-side at 50% 200%, gray 99%, #0000 0) 7% 4% / 15% 9%,
    radial-gradient(farthest-side at 50% 200%, gray 99%, #0000 0) 95% 22% / 35% 5%,
    radial-gradient(farthest-side at 50% 200%, gray 99%, #0000 0) 92% 17% / 25% 10%,
    /* moon */
    radial-gradient(closest-side circle at 70% 20%, orange 99.99%, #0000 0),
    /* fence */
    linear-gradient(#000 0 0) 25% 56% / 25% 0.5%, 
    linear-gradient(#000 0 0) 73% 56% / 25% 0.5%, 
    repeating-linear-gradient(90deg, #000 0 5%, #0000 0 10%) 25% 78% / 25% 30%,
    repeating-linear-gradient(90deg, #000 0 5%, #0000 0 10%) 75% 78% / 25% 30%,
    /* base + hill */
    radial-gradient(60% 100% at 50% 160%, #000 99.99%, #0000 0) 
    #247;
  background-repeat: no-repeat;
}

.haunted::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  clip-path: polygon(32% 70%, 26.5% 36%, 24% 36%, 33% 20%, 42% 30%, 42% 15%, 39% 15%, 50% 2%, 50% 20%, 48% 20%, 48% 27%, 52% 27%, 52% 20%,50% 20%, 50% 2%, 61% 15%, 58% 15%, 58% 37%, 70% 50%, 67% 50%, 63% 70%, 60% 70%, 60% 55%, 60.25% 50.25%, 55.9% 50%, 56% 55.25%, 60% 55%, 60% 70%, 50.75% 70%, 51% 48%, 45% 48%, 46% 70%)
}

@keyframes ghost {
  0%, 50% { transform: translate(0, 0); }
  90% { transform: translate(500%, 0); }
  100% { transform: translate(500%, 100%); }
}

.haunted::before {
  content: "";
  animation: ghost 5s infinite;
  position: absolute;
  top: 52%;
  left: 40%;
  width: 3%;
  height: 6%;
  background: 
    radial-gradient(circle at 35% 30%, #000c 5%, #0000 0),
    radial-gradient(circle at 65% 30%, #000c 5%, #0000 0),
radial-gradient( at 50% 100%, #000 50%, #0000 0) 50% 40% / 30% 15% no-repeat, 
    #fffc;
  border-radius: 50% 50% 0 0;
  clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, 50% 200%, 50% 100%, 100% 100%, 90% 90%, 80% 100%, 70% 90%, 60% 100%, 50% 90%, 40% 100%, 30% 90%, 20% 100%, 10% 90%, 0 100%, 50% 100%, 50% 200%, -100% 200%);
  filter: drop-shadow(0 0 1vmin #fff);
}