Pulsar
Perimeter

Perimeter

CSS

A boundary closes around a cluster of assets, the last segment completing the ring.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Security and trust
Industries
Security and identity, Energy and utilities
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Perimeter
CSS tier
Static vector
Perimeter, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-perimeter-title" class="pulsar pulsar-vault-perimeter" data-pulsar="vault-perimeter" role="img" viewBox="0 0 48 48"><title id="vault-perimeter-title">Perimeter</title><rect id="vault-perimeter-asset-1" width="8" height="8" x="15" y="15" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-perimeter-asset-2" width="8" height="8" x="25" y="15" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-perimeter-asset-3" width="8" height="8" x="15" y="25" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-perimeter-asset-4" width="8" height="8" x="25" y="25" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-perimeter-top" width="36" height="4" x="6" y="6" fill="currentColor" rx="2"></rect><rect id="vault-perimeter-right" width="4" height="28" x="38" y="10" fill="currentColor" rx="2"></rect><rect id="vault-perimeter-bottom" width="36" height="4" x="6" y="38" fill="currentColor" rx="2"></rect><rect id="vault-perimeter-left" width="4" height="28" x="6" y="10" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the last segment, the one that actually closes the boundary. */
.pulsar-vault-perimeter #vault-perimeter-left {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-perimeter #vault-perimeter-top,
.pulsar-vault-perimeter #vault-perimeter-right,
.pulsar-vault-perimeter #vault-perimeter-bottom,
.pulsar-vault-perimeter #vault-perimeter-left {
  transform-box: view-box;
  animation-duration: 4000ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
}

.pulsar-vault-perimeter #vault-perimeter-top {
  animation-name: vault-perimeter-from-left;
}

.pulsar-vault-perimeter #vault-perimeter-right {
  animation-name: vault-perimeter-from-top;
  animation-delay: -160ms;
}

.pulsar-vault-perimeter #vault-perimeter-bottom {
  animation-name: vault-perimeter-from-right;
  animation-delay: -320ms;
}

/* The closing segment comes last and stays a beat longer before the reset. */
.pulsar-vault-perimeter #vault-perimeter-left {
  animation-name: vault-perimeter-close;
}

@keyframes vault-perimeter-from-left {
  0% {
    transform: translateX(-40px);
  }
  30%,
  88% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40px);
  }
}

@keyframes vault-perimeter-from-top {
  0% {
    transform: translateY(-34px);
  }
  30%,
  88% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-34px);
  }
}

@keyframes vault-perimeter-from-right {
  0% {
    transform: translateX(40px);
  }
  30%,
  88% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(40px);
  }
}

@keyframes vault-perimeter-close {
  0%,
  38% {
    transform: translateY(34px);
    opacity: 0;
  }
  58%,
  88% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(34px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-perimeter #vault-perimeter-top,
  .pulsar-vault-perimeter #vault-perimeter-right,
  .pulsar-vault-perimeter #vault-perimeter-bottom,
  .pulsar-vault-perimeter #vault-perimeter-left {
    animation: none;
    transform: translate(0, 0);
    opacity: 1;
  }
}

From this family15 in Vault

See the family