Access gate, locked

Variant: Locked

A bolt seated across two closed leaves, with four bearing ticks blinking out of phase and a single tug on the bolt once per cycle. The out-of-phase ticks are what stop it reading as a fidget — the mechanism looks loaded rather than idle. Reach for it on something gated rather than merely unavailable, where stillness alone would read as broken.

statusaccesssvgloop

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 — locked</title>
    <style>
      :root {
        --ivory: #faf9f5;
        --slate: #141413;
        --clay: #d97757;
        --oat: #e3dacc;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --loop: 5.2s;
      }

      * {
        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;
      }

      /* Shared structure across the set: oat ring, four bearing ticks,
         two ivory leaves meeting on a centre seam, one clay bolt. */
      .ring,
      .tick,
      .leaf {
        fill: none;
        stroke: var(--oat);
        stroke-width: 2.5;
      }

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

      .tick {
        stroke-linecap: round;
      }

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

      /* The plate is at rest, not dead: a barely-there breath, slow enough
         that you register it as presence rather than motion. */
      .plate {
        transform-origin: center;
        animation: breathe var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @keyframes breathe {
        0%,
        100% {
          transform: scale(0.996);
        }
        50% {
          transform: scale(1);
        }
      }

      /* The ticks idle out of phase — a sentry blinking, never in unison. */
      .tick {
        animation: tick-glow var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite;
        opacity: 0.45;
      }

      .tick:nth-of-type(2) {
        animation-delay: -0.35s;
      }
      .tick:nth-of-type(3) {
        animation-delay: -0.7s;
      }
      .tick:nth-of-type(4) {
        animation-delay: -1.05s;
      }

      @keyframes tick-glow {
        0%,
        100% {
          opacity: 0.45;
        }
        45% {
          opacity: 1;
        }
      }

      /* Once a loop the bolt tugs against the seam and settles — the sound
         of a locked door being tried. Out fast, back fast, then stillness. */
      .bolt {
        animation:
          tug var(--loop) linear infinite,
          bolt-pulse 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @keyframes tug {
        0%,
        55% {
          transform: translateX(0);
          animation-timing-function: var(--ease-out);
        }
        58% {
          transform: translateX(-2.5px);
          animation-timing-function: var(--ease-out);
        }
        63%,
        100% {
          transform: translateX(0);
        }
      }

      @keyframes bolt-pulse {
        0%,
        100% {
          opacity: 0.82;
        }
        50% {
          opacity: 1;
        }
      }

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

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

      @media (prefers-reduced-motion: reduce) {
        .plate,
        .bolt {
          animation: none;
        }

        .bolt {
          animation: bolt-pulse 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }

        .tick {
          animation-duration: 6.4s;
        }

        @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="A closed access gate at rest">
      <g class="plate">
        <circle class="ring" cx="100" cy="90" r="48" />

        <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, verifying

Verifying