Access gate, verifying

Variant: Verifying

The check in flight: an arc sweeps the rim while a read-line crosses the plate, phase-locked to exactly two sweeps so the two rhythms never drift apart. Indeterminate on purpose — it claims no progress it cannot know. Use it between a credential going out and an answer coming back, where a determinate bar would be a lie.

loadingaccesssvgloop

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Gate — verifying</title>
    <style>
      :root {
        --ivory: #faf9f5;
        --slate: #141413;
        --clay: #d97757;
        --oat: #e3dacc;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .gate {
        width: 200px;
        height: 180px;
        overflow: visible;
      }

      .gate * {
        transform-box: fill-box;
      }

      .ring,
      .tick,
      .leaf,
      .arc {
        fill: none;
        stroke: var(--oat);
        stroke-width: 2.5;
      }

      .leaf {
        fill: var(--ivory);
        stroke-linejoin: round;
      }

      .tick {
        stroke-linecap: round;
        opacity: 0.45;
      }

      .bolt {
        fill: none;
        stroke: var(--clay);
        stroke-width: 8;
        stroke-linecap: round;
      }

      /* The check is in flight, so the bolt stays across the seam — nothing
         has been decided yet. It only breathes, on the arc's own rhythm. */
      .bolt {
        animation: bolt-listen 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @keyframes bolt-listen {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      /* Two clay arcs of fixed length sweep the ring at different periods.
         Fixed length is the point: the arc can never grow toward a finish,
         so it cannot promise progress it does not have. Linear, because any
         easing would read as the request stalling once per revolution. */
      .arc {
        stroke: var(--clay);
        stroke-linecap: round;
        transform-origin: center;
        animation: sweep 1.05s linear infinite;
      }

      .arc-2 {
        opacity: 0.32;
        animation-duration: 1.65s;
      }

      @keyframes sweep {
        to {
          transform: rotate(360deg);
        }
      }

      @media (hover: hover) and (pointer: fine) {
        .gate {
          transition: transform 200ms var(--ease-out);
        }

        .gate:hover {
          transform: scale(1.015);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .arc {
          animation: arc-fade 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }

        .arc-2 {
          animation-delay: -0.8s;
          opacity: 0.32;
        }

        .bolt {
          animation-duration: 3.2s;
        }

        @keyframes arc-fade {
          0%,
          100% {
            opacity: 0.2;
          }
          50% {
            opacity: 1;
          }
        }

        @media (hover: hover) and (pointer: fine) {
          .gate:hover {
            transform: none;
          }
        }
      }
    </style>
  </head>
  <body>
    <svg
      class="gate"
      viewBox="0 0 200 180"
      role="img"
      aria-label="An access gate checking credentials"
    >
      <g class="plate">
        <circle class="ring" cx="100" cy="90" r="48" />
        <circle
          class="arc arc-1"
          cx="100"
          cy="90"
          r="48"
          pathLength="100"
          stroke-dasharray="24 76"
        />
        <circle
          class="arc arc-2"
          cx="100"
          cy="90"
          r="48"
          pathLength="100"
          stroke-dasharray="10 90"
          stroke-dashoffset="-42"
        />

        <line class="tick" x1="138.2" y1="51.8" x2="141.7" y2="48.3" />
        <line class="tick" x1="61.8" y1="51.8" x2="58.3" y2="48.3" />
        <line class="tick" x1="61.8" y1="128.2" x2="58.3" y2="131.7" />
        <line class="tick" x1="138.2" y1="128.2" x2="141.7" y2="131.7" />

        <path class="leaf" d="M100 58 A32 32 0 0 0 100 122 Z" />
        <path class="leaf" d="M100 58 A32 32 0 0 1 100 122 Z" />

        <line class="bolt" x1="76" y1="90" x2="124" y2="90" />
      </g>
    </svg>
  </body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Access gate, granted

Granted

Access gate, locked

Locked