Back to the library
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" />
<meta name="animation-knobs" content="overshoot: ok" />
<title>Gate — locked</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — every duration in the document runs off --t. The bolt's own
pulse is half the loop, and the ticks idle a third of a second apart;
both divide by the same --speed, so the phase relationships hold
under any pace roll. */
--cycle: 5.2s;
--t: calc(var(--cycle) / var(--speed));
--_pulse: calc(2.6s / var(--speed));
--_stagger: calc(0.35s / var(--speed));
--_hover: calc(200ms / var(--speed));
/* The reduced-motion pair: slower still, same ratio to each other. */
--_pulse-calm: calc(3.2s / var(--speed));
--_tick-calm: calc(6.4s / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-accent: cubic-bezier(0.45, 0, 0.55, 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;
}
/* 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(--t) var(--ease-accent) 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(--t) var(--ease-accent) infinite;
opacity: 0.45;
}
.tick:nth-of-type(2) {
animation-delay: calc(var(--_stagger) * -1);
}
.tick:nth-of-type(3) {
animation-delay: calc(var(--_stagger) * -2);
}
.tick:nth-of-type(4) {
animation-delay: calc(var(--_stagger) * -3);
}
@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(--t) linear infinite,
bolt-pulse var(--_pulse) var(--ease-accent) 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 var(--_hover) var(--ease-out);
}
.gate:hover {
transform: scale(1.015);
}
}
@media (prefers-reduced-motion: reduce) {
.plate,
.bolt {
animation: none;
}
.bolt {
animation: bolt-pulse var(--_pulse-calm) var(--ease-accent) infinite;
}
.tick {
animation-duration: var(--_tick-calm);
}
@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.