body {
  margin: 0;
  height: 100vh;
  background: black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tunnel {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: tunnelExpand 6s ease-in-out infinite;
  mix-blend-mode: screen;
  box-shadow: 0 0 60px currentColor, 0 0 120px currentColor;
  opacity: 0.8;
  width: 20vmin;
  height: 20vmin;
}

@keyframes tunnelExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(10); opacity: 0; }
}


.circle:nth-child(1)  { color: #ff007c; animation-delay: 0s;   z-index: 18; }
.circle:nth-child(2)  { color: #ff6600; animation-delay: 0.3s; z-index: 17; }
.circle:nth-child(3)  { color: #ffcc00; animation-delay: 0.6s; z-index: 16; }
.circle:nth-child(4)  { color: #00ff99; animation-delay: 0.9s; z-index: 15; }
.circle:nth-child(5)  { color: #00b8ff; animation-delay: 1.2s; z-index: 14; }
.circle:nth-child(6)  { color: #9d00ff; animation-delay: 1.5s; z-index: 13; }
.circle:nth-child(7)  { color: #ff0040; animation-delay: 1.8s; z-index: 12; }
.circle:nth-child(8)  { color: #ffffff; animation-delay: 2.1s; z-index: 11; }
.circle:nth-child(9)  { color: #00ffe0; animation-delay: 2.4s; z-index: 10; }
.circle:nth-child(10) { color: #ff9900; animation-delay: 2.7s; z-index: 9;  }
.circle:nth-child(11) { color: #ff0099; animation-delay: 3s;   z-index: 8;  }
.circle:nth-child(12) { color: #66ff00; animation-delay: 3.3s; z-index: 7;  }
.circle:nth-child(13) { color: #0099ff; animation-delay: 3.6s; z-index: 6;  }
.circle:nth-child(14) { color: #ff3399; animation-delay: 3.9s; z-index: 5;  }
.circle:nth-child(15) { color: #00ffff; animation-delay: 4.2s; z-index: 4;  }
.circle:nth-child(16) { color: #ff7f50; animation-delay: 4.5s; z-index: 3;  }
.circle:nth-child(17) { color: #ff00ff; animation-delay: 4.8s; z-index: 2;  }
.circle:nth-child(18) { color: #00ffcc; animation-delay: 5.1s; z-index: 1; }

.circle {
  width: 20vmin;
  height: 20vmin;
}