Pulsar

Isolate

CSS

A single core block in a grid rises slightly and is surrounded by four protective L-shaped walls that slide in to seal the perimeter.

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

Companion assets

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

Animated
CSS tier
Static vector
Isolate, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-enclave-isolate" data-pulsar="enclave-isolate" viewBox="0 0 160 96"><g fill="currentColor" opacity=".25"><circle cx="40" cy="24" r="2"></circle><circle cx="120" cy="24" r="2"></circle><circle cx="40" cy="72" r="2"></circle><circle cx="120" cy="72" r="2"></circle></g><g class="enclave-isolate-core"><rect width="24" height="24" x="68" y="36" fill="var(--pulsar-accent, currentColor)" fill-opacity=".25" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" rx="3"></rect><circle cx="80" cy="48" r="3" fill="var(--pulsar-accent, currentColor)"></circle></g><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M52 42V30h12" class="enclave-isolate-wall-tl"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M96 30h12v12" class="enclave-isolate-wall-tr"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108 54v12H96" class="enclave-isolate-wall-br"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M64 66H52V54" class="enclave-isolate-wall-bl"></path><circle cx="80" cy="48" r="26" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="enclave-isolate-halo"></circle></svg>

animation.css

.pulsar-enclave-isolate {
  display: block;
  overflow: visible;
}
.pulsar-enclave-isolate .enclave-isolate-core {
  transform-origin: 80px 48px;
  animation: enclave-isolate-core-anim 4500ms ease infinite;
}
.pulsar-enclave-isolate .enclave-isolate-wall-tl {
  animation: enclave-isolate-tl-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-isolate .enclave-isolate-wall-tr {
  animation: enclave-isolate-tr-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-isolate .enclave-isolate-wall-br {
  animation: enclave-isolate-br-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-isolate .enclave-isolate-wall-bl {
  animation: enclave-isolate-bl-anim 4500ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-enclave-isolate .enclave-isolate-halo {
  transform-origin: 80px 48px;
  animation: enclave-isolate-halo-anim 4500ms ease infinite;
}

@keyframes enclave-isolate-core-anim {
  0%,
  15% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  35%,
  80% {
    transform: scale(1);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@keyframes enclave-isolate-tl-anim {
  0%,
  15% {
    transform: translate(-14px, -14px);
  }
  38%,
  80% {
    transform: translate(8px, 8px);
  }
  92%,
  100% {
    transform: translate(-14px, -14px);
  }
}

@keyframes enclave-isolate-tr-anim {
  0%,
  15% {
    transform: translate(14px, -14px);
  }
  38%,
  80% {
    transform: translate(-8px, 8px);
  }
  92%,
  100% {
    transform: translate(14px, -14px);
  }
}

@keyframes enclave-isolate-br-anim {
  0%,
  15% {
    transform: translate(14px, 14px);
  }
  38%,
  80% {
    transform: translate(-8px, -8px);
  }
  92%,
  100% {
    transform: translate(14px, 14px);
  }
}

@keyframes enclave-isolate-bl-anim {
  0%,
  15% {
    transform: translate(-14px, 14px);
  }
  38%,
  80% {
    transform: translate(8px, -8px);
  }
  92%,
  100% {
    transform: translate(-14px, 14px);
  }
}

@keyframes enclave-isolate-halo-anim {
  0%,
  36% {
    transform: scale(0.6);
    opacity: 0;
  }
  44% {
    opacity: 0.9;
  }
  65% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

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

From this family15 in Enclave

See the family