API Gateway

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-gateway-title" class="pulsar pulsar-endpoint-gateway" data-pulsar="endpoint-gateway" role="img" viewBox="0 0 160 96"><title id="endpoint-gateway-title">A vertical API gateway barrier opening an aperture to route data streams</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-gateway-datum" d="M20 24h8m-8 0v8m120-8h-8m8 0v8M20 72h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-gateway-grid" stroke-dasharray="2 4" d="M50 28v40m60-40v40"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-gateway-track-in" x1="28" x2="74" y1="48" y2="48"></line><path id="endpoint-gateway-track-upper" d="M86 48h10l16-16h20"></path><path id="endpoint-gateway-track-lower" d="M86 48h10l16 16h20"></path><path id="endpoint-gateway-pillar-top" d="M80 18v20m-4 0h8"></path><path id="endpoint-gateway-pillar-bottom" d="M80 78V58m-4 0h8"></path><line id="endpoint-gateway-shutter-top" x1="80" x2="80" y1="38" y2="48"></line><line id="endpoint-gateway-shutter-bottom" x1="80" x2="80" y1="48" y2="58"></line></g><line id="endpoint-gateway-beam" x1="75" x2="85" y1="48" y2="48" stroke="currentColor" stroke-width="1.5"></line><g id="endpoint-gateway-node-in"><rect width="8" height="8" x="30" y="44" fill="currentColor" rx="1"></rect></g><g id="endpoint-gateway-node-upper"><circle cx="86" cy="48" r="3" fill="currentColor"></circle></g><g id="endpoint-gateway-node-lower"><circle cx="86" cy="48" r="3" fill="currentColor"></circle></g></svg>

.pulsar-endpoint-gateway #endpoint-gateway-node-in,
.pulsar-endpoint-gateway #endpoint-gateway-node-upper,
.pulsar-endpoint-gateway #endpoint-gateway-node-lower,
.pulsar-endpoint-gateway #endpoint-gateway-shutter-top,
.pulsar-endpoint-gateway #endpoint-gateway-shutter-bottom,
.pulsar-endpoint-gateway #endpoint-gateway-beam {
  transform-box: fill-box;
  animation-duration: 3600ms;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.pulsar-endpoint-gateway #endpoint-gateway-node-in {
  fill: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-gateway-node-in;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.pulsar-endpoint-gateway #endpoint-gateway-node-upper {
  fill: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-gateway-node-upper;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.pulsar-endpoint-gateway #endpoint-gateway-node-lower {
  fill: currentColor;
  transform-origin: center;
  animation-name: endpoint-gateway-node-lower;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.pulsar-endpoint-gateway #endpoint-gateway-shutter-top {
  stroke: currentColor;
  transform-origin: center top;
  animation-name: endpoint-gateway-shutter;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.pulsar-endpoint-gateway #endpoint-gateway-shutter-bottom {
  stroke: currentColor;
  transform-origin: center bottom;
  animation-name: endpoint-gateway-shutter;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.pulsar-endpoint-gateway #endpoint-gateway-beam {
  stroke: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-gateway-beam;
  animation-timing-function: ease-in-out;
}

@keyframes endpoint-gateway-shutter {
  0%,
  14%,
  80%,
  100% {
    transform: scaleY(1);
  }
  24%,
  66% {
    transform: scaleY(0.2);
  }
}

@keyframes endpoint-gateway-beam {
  0%,
  20%,
  50%,
  100% {
    opacity: 0;
    transform: scaleX(0.2);
  }
  26%,
  36% {
    opacity: 1;
    transform: scaleX(1.4);
  }
}

@keyframes endpoint-gateway-node-in {
  0%,
  8% {
    transform: translate(0, 0);
    opacity: 1;
  }
  32% {
    transform: translate(44px, 0);
    opacity: 1;
  }
  38% {
    transform: translate(44px, 0) scale(0.2);
    opacity: 0;
  }
  88% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
  96%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes endpoint-gateway-node-upper {
  0%,
  30% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
  36% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  48% {
    transform: translate(10px, 0);
    opacity: 1;
  }
  72% {
    transform: translate(46px, -16px);
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(46px, -16px) scale(0.3);
    opacity: 0;
  }
}

@keyframes endpoint-gateway-node-lower {
  0%,
  30% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
  36% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  48% {
    transform: translate(10px, 0);
    opacity: 1;
  }
  72% {
    transform: translate(46px, 16px);
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(46px, 16px) scale(0.3);
    opacity: 0;
  }
}

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

  .pulsar-endpoint-gateway #endpoint-gateway-beam {
    opacity: 0;
  }

  .pulsar-endpoint-gateway #endpoint-gateway-node-upper {
    transform: translate(46px, -16px);
    opacity: 1;
  }

  .pulsar-endpoint-gateway #endpoint-gateway-node-lower {
    transform: translate(46px, 16px);
    opacity: 1;
  }
}