Pulsar

Hardware Security Module

CSS

A cryptographic key block descends into a thick solid vault box, and a heavy sliding door seals the top.

Tier
CSS
Dependencies
None
Duration
4.5 s, loops
Categories
Data and progress
Use cases
Security and trust, Compliance and audit
Industries
SaaS and software, Security and identity
Style
Geometric solid · light stroke
Set
enclave
Tags
geometricbarsglowminimalui

Companion assets

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

Animated
CSS tier
Static vector
Hardware Security Module, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-enclave-hsm" data-pulsar="enclave-hsm" viewBox="0 0 160 96"><rect width="68" height="42" x="46" y="36" stroke="currentColor" stroke-width="2" opacity=".6" rx="4"></rect><circle cx="52" cy="42" r="1.5" fill="currentColor" opacity=".5"></circle><circle cx="108" cy="42" r="1.5" fill="currentColor" opacity=".5"></circle><circle cx="52" cy="72" r="1.5" fill="currentColor" opacity=".5"></circle><circle cx="108" cy="72" r="1.5" fill="currentColor" opacity=".5"></circle><rect width="36" height="24" x="62" y="46" stroke="currentColor" stroke-dasharray="3 2" stroke-width="1.5" opacity=".4" rx="3"></rect><g class="enclave-hsm-key"><rect width="24" height="16" x="68" y="50" fill="var(--pulsar-accent, currentColor)" fill-opacity=".25" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" rx="2"></rect><circle cx="80" cy="58" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle></g><g class="enclave-hsm-door"><rect width="76" height="8" x="42" y="32" fill="currentColor" stroke="currentColor" stroke-width="1.5" rx="2"></rect></g><circle cx="80" cy="36" r="2" fill="var(--pulsar-accent, currentColor)" class="enclave-hsm-led"></circle></svg>

animation.css

.pulsar-enclave-hsm {
  display: block;
  overflow: visible;
}
.pulsar-enclave-hsm .enclave-hsm-key {
  animation: enclave-hsm-key-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-hsm .enclave-hsm-door {
  animation: enclave-hsm-door-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-hsm .enclave-hsm-led {
  animation: enclave-hsm-led-anim 4500ms ease infinite;
}

@keyframes enclave-hsm-key-anim {
  0%,
  15% {
    transform: translateY(-24px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  42%,
  78% {
    transform: translateY(0);
    opacity: 1;
  }
  92%,
  100% {
    transform: translateY(-24px);
    opacity: 0;
  }
}

@keyframes enclave-hsm-door-anim {
  0%,
  35% {
    transform: translateX(45px);
    opacity: 0;
  }
  48%,
  80% {
    transform: translateX(0);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(45px);
    opacity: 0;
  }
}

@keyframes enclave-hsm-led-anim {
  0%,
  46% {
    opacity: 0;
  }
  52%,
  80% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-enclave-hsm * {
    animation: none !important;
  }
}

From this family15 in Enclave

See the family