Pulsar

Egress

CSS

An emergency egress path navigates around wall partitions with a guided directional clearance indicator.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Navigation and wayfinding, Security and trust
Industries
Real estate and property, Construction and built environment
Style
Technical · light stroke
Set
floorplate
Tags
arrowlineminimalloop

Companion assets

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

Animated
CSS tier
Static vector
Egress, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-floorplate-egress" data-pulsar="floorplate-egress" viewBox="0 0 160 96"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M36 28h38v26m50 14H96V42" class="walls" opacity=".3"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="3 3" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M40 40h22v26h56" class="egress-path"></path><circle cx="40" cy="40" r="3" fill="var(--pulsar-accent, currentColor)" class="runner"></circle></svg>

animation.css

.pulsar-floorplate-egress {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-floorplate-egress .runner {
  animation: floorplate-egress-run 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-floorplate-egress .egress-path {
  animation: floorplate-egress-glow 4s ease-in-out infinite;
}
@keyframes floorplate-egress-run {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  40% {
    transform: translate(22px, 0);
  }
  65% {
    transform: translate(22px, 26px);
  }
  90% {
    transform: translate(78px, 26px);
    opacity: 1;
  }
  100% {
    transform: translate(78px, 26px);
    opacity: 0;
  }
}
@keyframes floorplate-egress-glow {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-floorplate-egress .runner,
  .pulsar-floorplate-egress .egress-path {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Floorplate

See the family