<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.