<div>SPOOKY</div>
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

html {
  background: black;
}

div {
  font-family: 'Courier Prime', monospace, monospace;
  font-size: 25vmin;
  white-space: pre;
  position: absolute;
  font-weight: bold;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div::before,
div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 1ch;
  height: 100%;
  background: #000;
}

div::before {
  left: 2ch;
  background:
    radial-gradient(farthest-side at 0% 50%, black 99%, #0000 0) 55.5% 57% / 6% 7%,
    radial-gradient(farthest-side at 100% 50%, black 99%, #0000 0) 44.5% 57% / 6% 7%,
    radial-gradient(closest-side, black 99%, #0000 0) 28% 45% / 25% 12.5%,
    radial-gradient(closest-side, black 99%, #0000 0) 72% 45% / 25% 12.5%,
    radial-gradient(50% 55% at 50% 55%, white 90%, #0000 0) 50% 25% / 100% 1ch,
    repeating-linear-gradient(to right, black 0 5%, #0000 0 16%),
    linear-gradient(to right, black 19%, white 0 81%, black 0) 50% 45% / 90% 50%
   ;
  background-repeat: no-repeat;
}

div::after {
  left: 3ch;
  background:
    radial-gradient(closest-side, black 99%, #0000 0) 30% 30% / 25% 12.5%,
    radial-gradient(closest-side, black 99%, #0000 0) 70% 30% / 25% 12.5%,
    radial-gradient(farthest-side at 50% 100%, black 99%, #0000 0) 50% 43% / 15% 5%,
    conic-gradient(at 50% 0, white 152deg, black 0 208deg, white 0) 25% 70% / 20% 10%,
    conic-gradient(at 50% 0, white 152deg, black 0 208deg, white 0) 50% 70% / 20% 10%,
    conic-gradient(at 50% 0, white 152deg, black 0 208deg, white 0) 75% 70% / 20% 10%,
    radial-gradient(50% 55% at 50% 60%, white 99.9%, #0000 0) 50% 30% / 90% 60%
   ;
  background-repeat: no-repeat;
  background-color:  black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.