Pulsar

Reserve Boundaries

CSS

Concentric rectangular outlines with corner registration marks slowly expand and contract around a central origin.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Backgrounds and ambient
Use cases
Security and trust, Ambient background
Industries
Finance and fintech, Cross-industry
Style
Technical · light stroke
Set
treasury
Tags
geometricscalestrokeambient

Companion assets

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

Animated
CSS tier
Static vector
Reserve Boundaries, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-treasury-reserve" data-pulsar="treasury-reserve" viewBox="0 0 160 96"><g class="boundary outer-box"><rect width="116" height="64" x="22" y="16" stroke="currentColor" stroke-dasharray="6 4" opacity=".3" rx="2"></rect></g><g class="boundary mid-box"><rect width="88" height="48" x="36" y="24" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" opacity=".6" rx="2"></rect></g><g class="boundary inner-box"><rect width="56" height="28" x="52" y="34" stroke="currentColor" stroke-dasharray="2 3" opacity=".4" rx="2"></rect></g><g stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="origin-mark"><line x1="76" x2="84" y1="48" y2="48"></line><line x1="80" x2="80" y1="44" y2="52"></line><circle cx="80" cy="48" r="2" fill="var(--pulsar-accent, currentColor)"></circle></g><g stroke="currentColor" stroke-width="1.5" class="corner-registration" opacity=".5"><path d="M18 20h4v-4m120 4h-4v-4M18 76h4v4m120-4h-4v4"></path></g></svg>

animation.css

.pulsar-treasury-reserve {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-treasury-reserve .boundary.outer-box {
  transform-origin: 80px 48px;
  animation: treasury-reserve-breathe-outer 4s ease-in-out infinite;
}
.pulsar-treasury-reserve .boundary.mid-box {
  transform-origin: 80px 48px;
  animation: treasury-reserve-breathe-mid 4s ease-in-out infinite;
}
.pulsar-treasury-reserve .boundary.inner-box {
  transform-origin: 80px 48px;
  animation: treasury-reserve-breathe-inner 4s ease-in-out infinite;
}
.pulsar-treasury-reserve .origin-mark {
  transform-origin: 80px 48px;
  animation: treasury-reserve-pulse 4s ease-in-out infinite;
}
@keyframes treasury-reserve-breathe-outer {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.45;
  }
}
@keyframes treasury-reserve-breathe-mid {
  0%,
  100% {
    transform: scale(1.02);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.97);
    opacity: 0.85;
  }
}
@keyframes treasury-reserve-breathe-inner {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.6;
  }
}
@keyframes treasury-reserve-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-treasury-reserve .boundary.outer-box,
  .pulsar-treasury-reserve .boundary.mid-box,
  .pulsar-treasury-reserve .boundary.inner-box,
  .pulsar-treasury-reserve .origin-mark {
    animation: none;
    transform: none;
    opacity: 0.6;
  }
}

From this family15 in Treasury

See the family