Pulsar

Upgrade

CSS

A seat license card expands and gains an elevated duotone tier ring with status brackets, representing an enterprise plan upgrade.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Icons and micro-interactions
Use cases
Determinate progress, Onboarding and setup
Industries
SaaS and software, Cross-industry
Style
Duotone · light stroke
Set
seat
Tags
scaleringgeometricminimalpulse

Companion assets

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

Animated
CSS tier
Static vector
Upgrade, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-seat-upgrade" data-pulsar="seat-upgrade" viewBox="0 0 160 96"><rect width="52" height="48" x="54" y="24" fill="currentColor" fill-opacity=".1" stroke="currentColor" stroke-width="1.25" opacity=".5" rx="8"></rect><circle cx="80" cy="42" r="6" fill="currentColor" opacity=".6"></circle><path fill="currentColor" d="M68 58c0-6 5-8 12-8s12 2 12 8" opacity=".6"></path><circle cx="80" cy="48" r="32" fill="var(--pulsar-accent, currentColor)" fill-opacity=".06" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="4 3" stroke-width="1.5" class="seat-upgrade-ring"></circle><g class="seat-upgrade-brackets"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M46 32V20h12"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M114 32V20h-12"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M46 64v12h12"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M114 64v12h-12"></path></g></svg>

animation.css

.pulsar-seat-upgrade {
  display: block;
  overflow: visible;
}
.pulsar-seat-upgrade .seat-upgrade-ring {
  animation: seat-upgrade-ring-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}
.pulsar-seat-upgrade .seat-upgrade-brackets {
  animation: seat-upgrade-brackets-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

@keyframes seat-upgrade-ring-anim {
  0%,
  15% {
    transform: scale(0.85);
    opacity: 0.2;
  }
  40%,
  80% {
    transform: scale(1.05);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.85);
    opacity: 0.2;
  }
}

@keyframes seat-upgrade-brackets-anim {
  0%,
  15% {
    transform: scale(0.92);
    opacity: 0.3;
  }
  40%,
  80% {
    transform: scale(1.06);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.92);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-seat-upgrade .seat-upgrade-ring,
  .pulsar-seat-upgrade .seat-upgrade-brackets {
    animation: none;
  }
}

From this family15 in Seat

See the family