body {
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

main {
  --image: url(https://i.pinimg.com/originals/2c/8f/d2/2c8fd2c1122ca488c87b1d0dde03bb56.jpg);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(closest-corner at 50%, transparent, transparent, rgba(0, 0, 0, 0.3)) center/cover, var(--image) center/cover;
  filter: blur(1rem);
}

.wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--image) center/cover;
  position: relative;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  z-index: 1;
}
.wrapper .svg-wrapper {
  display: block;
  cursor: default;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  background-color: black;
  mix-blend-mode: multiply;
}
.wrapper .svg-wrapper:active * {
  -webkit-animation: none !important;
          animation: none !important;
}
.wrapper .svg-wrapper svg {
  width: 100%;
  height: 100%;
  position: relative;
}
.wrapper .svg-wrapper svg path {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  -webkit-animation: draw 1.2s linear both;
          animation: draw 1.2s linear both;
}
.wrapper .svg-wrapper svg path:nth-child(1) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.wrapper .svg-wrapper svg path:nth-child(2) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.wrapper .svg-wrapper svg path:nth-child(3) {
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}
.wrapper .svg-wrapper svg path:nth-child(4) {
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}
.wrapper .svg-wrapper .drips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vmin;
  height: 100vmin;
}
.wrapper .svg-wrapper .drips span {
  --height: 8vmin;
  display: block;
  width: 1.5vmin;
  height: 0;
  border-radius: 8vmin;
  background-color: white;
  position: absolute;
  -webkit-animation: drip 1.4s ease-out both;
          animation: drip 1.4s ease-out both;
}
.wrapper .svg-wrapper .drips span:nth-child(1) {
  --height: 9vmin;
  top: 90%;
  left: 11%;
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.wrapper .svg-wrapper .drips span:nth-child(2) {
  width: 4.5vmin;
  --height: 4vmin;
  top: 76%;
  left: 40%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.wrapper .svg-wrapper .drips span:nth-child(3) {
  width: 4vmin;
  --height: 4.5vmin;
  top: 78%;
  left: 72%;
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s;
}
.wrapper .svg-wrapper .drips span:nth-child(4) {
  width: 1.2vmin;
  --height: 10vmin;
  top: 33%;
  left: 71.5%;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes drip {
  to {
    height: var(--height);
  }
}
@keyframes drip {
  to {
    height: var(--height);
  }
}