Pulsar
Escalate

Escalate

CSS

A marker lifts one tier and the level above it brightens to receive it.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Notifications
Industries
Healthcare and life sciences, Insurance
Style
Bold line · regular stroke
Set
verdict
Tags
loopminimalui

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-escalate-title" class="pulsar pulsar-verdict-escalate" data-pulsar="verdict-escalate" role="img" viewBox="0 0 40 40"><title id="verdict-escalate-title">Escalate</title><path id="verdict-escalate-bar-bottom" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M8 30h24"></path><path id="verdict-escalate-bar-mid" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M8 20h24"></path><path id="verdict-escalate-bar-top" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M8 10h24"></path><circle id="verdict-escalate-marker" cx="20" cy="30" r="2" fill="currentColor"></circle></svg>

animation.css

/* Accent: the marker climbing the bars. */
.pulsar-verdict-escalate #verdict-escalate-marker {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-escalate #verdict-escalate-marker {
  animation: verdict-escalate-marker 4000ms linear infinite;
}

.pulsar-verdict-escalate #verdict-escalate-bar-mid {
  animation: verdict-escalate-bar-mid 4000ms linear infinite;
}

.pulsar-verdict-escalate #verdict-escalate-bar-top {
  animation: verdict-escalate-bar-top 4000ms linear infinite;
}

@keyframes verdict-escalate-marker {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  30%,
  50% {
    transform: translateY(-10px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  80% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes verdict-escalate-bar-mid {
  0%,
  30% {
    stroke-width: 3;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  50%,
  80% {
    stroke-width: 6;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    stroke-width: 3;
  }
}

@keyframes verdict-escalate-bar-top {
  0%,
  80% {
    stroke-width: 3;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  90% {
    stroke-width: 6;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    stroke-width: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-escalate #verdict-escalate-marker,
  .pulsar-verdict-escalate #verdict-escalate-bar-mid,
  .pulsar-verdict-escalate #verdict-escalate-bar-top {
    animation: none;
  }
  .pulsar-verdict-escalate #verdict-escalate-marker {
    transform: translateY(-20px);
  }
  .pulsar-verdict-escalate #verdict-escalate-bar-mid,
  .pulsar-verdict-escalate #verdict-escalate-bar-top {
    stroke-width: 6;
  }
}