Payload Buffer

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-payload-title" class="pulsar pulsar-endpoint-payload" data-pulsar="endpoint-payload" role="img" viewBox="0 0 160 96"><title id="endpoint-payload-title">A technical payload buffer chamber filling and discharging data</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-payload-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-payload-segs" stroke-dasharray="2 3" d="M60 36h40M60 48h40M60 60h40"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><path id="endpoint-payload-frame" d="M54 24h52M54 72h52M60 24v48m40-48v48"></path><line id="endpoint-payload-pipe-in" x1="28" x2="54" y1="48" y2="48"></line><line id="endpoint-payload-pipe-out" x1="106" x2="132" y1="48" y2="48"></line></g><path id="endpoint-payload-ticks" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.2" d="M54 36h4m-4 12h4m-4 12h4m44-24h4m-4 12h4m-4 12h4"></path><line id="endpoint-payload-sweep-in" x1="28" x2="54" y1="48" y2="48" stroke="currentColor" stroke-dasharray="8 6" stroke-width="1.5"></line><line id="endpoint-payload-sweep-out" x1="106" x2="132" y1="48" y2="48" stroke="currentColor" stroke-dasharray="8 6" stroke-width="1.5"></line><rect id="endpoint-payload-fill" width="34" height="42" x="63" y="27" fill="currentColor" opacity=".85" rx="1"></rect><circle id="endpoint-payload-beacon" cx="80" cy="18" r="2.5" fill="currentColor"></circle><circle id="endpoint-payload-beacon-ring" cx="80" cy="18" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

.pulsar-endpoint-payload #endpoint-payload-fill,
.pulsar-endpoint-payload #endpoint-payload-sweep-in,
.pulsar-endpoint-payload #endpoint-payload-sweep-out,
.pulsar-endpoint-payload #endpoint-payload-frame,
.pulsar-endpoint-payload #endpoint-payload-ticks,
.pulsar-endpoint-payload #endpoint-payload-beacon,
.pulsar-endpoint-payload #endpoint-payload-beacon-ring {
  transform-box: fill-box;
  animation-duration: 3600ms;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.pulsar-endpoint-payload #endpoint-payload-fill {
  fill: var(--pulsar-accent, currentColor);
  transform-origin: center bottom;
  animation-name: endpoint-payload-f;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pulsar-endpoint-payload #endpoint-payload-ticks {
  stroke: var(--pulsar-accent, currentColor);
  animation-name: endpoint-payload-ticks-pulse;
  animation-timing-function: ease-in-out;
}

.pulsar-endpoint-payload #endpoint-payload-beacon {
  fill: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-payload-beacon;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pulsar-endpoint-payload #endpoint-payload-beacon-ring {
  stroke: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-payload-beacon-ring;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.pulsar-endpoint-payload #endpoint-payload-sweep-in {
  stroke: var(--pulsar-accent, currentColor);
  animation-name: endpoint-payload-sin;
  animation-timing-function: linear;
}

.pulsar-endpoint-payload #endpoint-payload-sweep-out {
  stroke: var(--pulsar-accent, currentColor);
  animation-name: endpoint-payload-sout;
  animation-timing-function: linear;
}

.pulsar-endpoint-payload #endpoint-payload-frame {
  stroke: currentColor;
  animation-name: endpoint-payload-fr;
}

@keyframes endpoint-payload-f {
  0%,
  12% {
    transform: scaleY(0.2);
    opacity: 0.45;
  }
  58%,
  70% {
    transform: scaleY(1);
    opacity: 1;
  }
  85%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.45;
  }
}

@keyframes endpoint-payload-ticks-pulse {
  0%,
  20% {
    opacity: 0.4;
  }
  58%,
  72% {
    opacity: 0.95;
  }
  90%,
  100% {
    opacity: 0.4;
  }
}

@keyframes endpoint-payload-beacon {
  0%,
  45% {
    transform: scale(0.85);
    opacity: 0.5;
  }
  58%,
  68% {
    transform: scale(1.3);
    opacity: 1;
  }
  80%,
  100% {
    transform: scale(0.85);
    opacity: 0.5;
  }
}

@keyframes endpoint-payload-beacon-ring {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 0.85;
  }
  75% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes endpoint-payload-sin {
  0%,
  60% {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
  100% {
    stroke-dashoffset: -28;
    opacity: 0.2;
  }
}

@keyframes endpoint-payload-sout {
  0%,
  65% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  72%,
  73%,
  92% {
    opacity: 1;
    stroke-dashoffset: -28;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -28;
  }
}

@keyframes endpoint-payload-fr {
  0%,
  55%,
  75%,
  100% {
    stroke: currentColor;
  }
  60%,
  70% {
    stroke: var(--pulsar-accent, currentColor);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-payload * {
    animation: none !important;
    transform: none;
  }

  .pulsar-endpoint-payload #endpoint-payload-fill {
    transform: scaleY(0.7);
    opacity: 0.8;
  }

  .pulsar-endpoint-payload #endpoint-payload-ticks {
    opacity: 0.8;
  }

  .pulsar-endpoint-payload #endpoint-payload-beacon {
    opacity: 1;
  }
}