html {
  background: #111;
  overflow: hidden;
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  place-items: center;
  font-size: 3vmin;
}

.helix {
  transform: rotateZ(45deg);
}

.strand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.35em auto;
  --d: calc(var(--i) / var(--total));
  --color: hsl(calc(-0.05turn + (var(--d) * 0.85turn)), 95%, 75%);
  --duration: 1.5s;
  --delay: calc((var(--duration) * -1) + 0.1s * var(--i));
  -webkit-animation: var(--duration) cubic-bezier(0.4, 0, 0.6, 1) infinite;
          animation: var(--duration) cubic-bezier(0.4, 0, 0.6, 1) infinite;
  -webkit-animation-delay: var(--delay);
          animation-delay: var(--delay);
}

.left,
.right {
  -webkit-animation: inherit;
          animation: inherit;
  display: grid;
  grid-template-areas: "layer";
  align-items: center;
  width: 7em;
}
.left > *,
.right > * {
  grid-area: layer;
}

.left {
  transform: translateZ(0px);
}

.right {
  transform: scaleX(-1);
}

.dot {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-duration: calc(var(--duration) * 2);
          animation-duration: calc(var(--duration) * 2);
  width: 100%;
  -webkit-animation-name: move-dot;
          animation-name: move-dot;
  --scale-start: 0.5;
  --scale-end: 1;
}
@-webkit-keyframes move-dot {
  50% {
    transform: translateX(200%);
  }
}
@keyframes move-dot {
  50% {
    transform: translateX(200%);
  }
}
.right .dot {
  --scale-start: 1;
  --scale-end: 0.5;
}
.dot::before {
  display: block;
  content: "";
  border-radius: 50%;
  width: 1em;
  height: 1em;
  background: var(--color);
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: scale-dot;
          animation-name: scale-dot;
}
@-webkit-keyframes scale-dot {
  33% {
    transform: scale(var(--scale-start));
  }
  66% {
    transform: scale(var(--scale-end));
  }
}
@keyframes scale-dot {
  33% {
    transform: scale(var(--scale-start));
  }
  66% {
    transform: scale(var(--scale-end));
  }
}

.line {
  width: calc(100% - 1.5em);
  height: 0.25em;
  border-radius: 1em;
  background: var(--color);
  margin-left: auto;
  transform-origin: center right;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: scale-line;
          animation-name: scale-line;
}
@-webkit-keyframes scale-line {
  50% {
    transform: scaleX(0.1);
  }
}
@keyframes scale-line {
  50% {
    transform: scaleX(0.1);
  }
}