Pulsar
Isolate

Isolate

CSS

One asset separates from the group and a boundary draws around it alone.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Security and trust
Industries
Healthcare and life sciences, Security and identity
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuiscale

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-isolate-title" class="pulsar pulsar-vault-isolate" data-pulsar="vault-isolate" role="img" viewBox="0 0 48 48"><title id="vault-isolate-title">Isolate</title><rect id="vault-isolate-group-1" width="10" height="10" x="4" y="13" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-isolate-group-2" width="10" height="10" x="16" y="13" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-isolate-group-3" width="10" height="10" x="4" y="25" fill="currentColor" opacity=".35" rx="2"></rect><rect id="vault-isolate-fence-top" width="18" height="3" x="26" y="12" fill="currentColor" rx="1.5"></rect><rect id="vault-isolate-fence-bottom" width="18" height="3" x="26" y="33" fill="currentColor" rx="1.5"></rect><rect id="vault-isolate-fence-left" width="3" height="18" x="26" y="15" fill="currentColor" rx="1.5"></rect><rect id="vault-isolate-fence-right" width="3" height="18" x="41" y="15" fill="currentColor" rx="1.5"></rect><rect id="vault-isolate-subject" width="10" height="10" x="16" y="25" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the asset being separated, against the group it leaves. */
.pulsar-vault-isolate #vault-isolate-subject {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-isolate #vault-isolate-subject {
  transform-box: view-box;
  animation: vault-isolate-separate 4000ms ease-in-out infinite;
}

@keyframes vault-isolate-separate {
  0%,
  12% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  40%,
  88% {
    transform: translate(13px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* The boundary only draws once the asset is out and standing alone. */
.pulsar-vault-isolate #vault-isolate-fence-top,
.pulsar-vault-isolate #vault-isolate-fence-bottom,
.pulsar-vault-isolate #vault-isolate-fence-left,
.pulsar-vault-isolate #vault-isolate-fence-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: vault-isolate-fence 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.pulsar-vault-isolate #vault-isolate-fence-bottom {
  animation-delay: -80ms;
}

.pulsar-vault-isolate #vault-isolate-fence-left {
  animation-delay: -160ms;
}

.pulsar-vault-isolate #vault-isolate-fence-right {
  animation-delay: -240ms;
}

@keyframes vault-isolate-fence {
  0%,
  42% {
    transform: scale(0.2);
    opacity: 0;
  }
  62%,
  88% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-isolate #vault-isolate-subject {
    animation: none;
    transform: translate(13px, -1px);
  }
  .pulsar-vault-isolate #vault-isolate-fence-top,
  .pulsar-vault-isolate #vault-isolate-fence-bottom,
  .pulsar-vault-isolate #vault-isolate-fence-left,
  .pulsar-vault-isolate #vault-isolate-fence-right {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
}

From this family15 in Vault

See the family