Pulsar

Standby

CSS

A dashed outline of a backup server fills with light as the primary node's connection line fades away.

Tier
CSS
Dependencies
None
Duration
5.5 s, loops
Categories
Icons and micro-interactions
Use cases
Sync and integration, Security and trust
Industries
SaaS and software, IT services and infrastructure
Style
Technical · light stroke
Set
failover
Tags
fadegeometriclinelooppulse

Companion assets

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

Animated
CSS tier
Static vector
Standby, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-failover-standby" data-pulsar="failover-standby" viewBox="0 0 160 96"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect width="24" height="18" x="68" y="16" fill="currentColor" fill-opacity=".08" rx="3"></rect><circle cx="80" cy="25" r="3" fill="currentColor"></circle><path id="failover-standby-link-p" d="M72 34 46 54"></path><path id="failover-standby-link-s" stroke="var(--pulsar-accent, currentColor)" d="m88 34 26 20"></path></g><g id="failover-standby-node-p" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect width="44" height="28" x="24" y="54" fill="currentColor" fill-opacity=".05" rx="3"></rect><circle cx="34" cy="68" r="2.5" fill="currentColor"></circle><line x1="44" x2="60" y1="65" y2="65"></line><line x1="44" x2="56" y1="71" y2="71"></line></g><g id="failover-standby-node-s" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect id="failover-standby-box-s" width="44" height="28" x="92" y="54" fill="var(--pulsar-accent, currentColor)" fill-opacity=".05" stroke-dasharray="3 3" rx="3"></rect><circle id="failover-standby-led-s" cx="102" cy="68" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle><line x1="112" x2="128" y1="65" y2="65"></line><line x1="112" x2="124" y1="71" y2="71"></line></g><circle id="failover-standby-pkt-p" cx="59" cy="44" r="2" fill="currentColor"></circle><circle id="failover-standby-pkt-s" cx="101" cy="44" r="2" fill="var(--pulsar-accent, currentColor)"></circle></svg>

animation.css

.pulsar-failover-standby #failover-standby-link-p,
.pulsar-failover-standby #failover-standby-node-p {
  animation: failover-standby-prim-anim 5500ms ease-in-out infinite;
}

@keyframes failover-standby-prim-anim {
  0%,
  32% {
    opacity: 1;
  }
  40%,
  82% {
    opacity: 0.2;
  }
  90%,
  100% {
    opacity: 1;
  }
}

.pulsar-failover-standby #failover-standby-link-s {
  animation: failover-standby-sec-link-anim 5500ms ease-in-out infinite;
}

@keyframes failover-standby-sec-link-anim {
  0%,
  34% {
    opacity: 0.25;
    stroke-dasharray: 2 3;
  }
  42%,
  82% {
    opacity: 1;
    stroke-dasharray: 0;
  }
  90%,
  100% {
    opacity: 0.25;
    stroke-dasharray: 2 3;
  }
}

.pulsar-failover-standby #failover-standby-box-s {
  animation: failover-standby-sec-box-anim 5500ms ease-in-out infinite;
}

@keyframes failover-standby-sec-box-anim {
  0%,
  34% {
    stroke-dasharray: 3 3;
    fill-opacity: 0.03;
  }
  42%,
  82% {
    stroke-dasharray: 0;
    fill-opacity: 0.15;
  }
  90%,
  100% {
    stroke-dasharray: 3 3;
    fill-opacity: 0.03;
  }
}

.pulsar-failover-standby #failover-standby-led-s {
  animation: failover-standby-sec-led-anim 5500ms ease-in-out infinite;
}

@keyframes failover-standby-sec-led-anim {
  0%,
  36% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  44%,
  82% {
    opacity: 1;
    transform: scale(1.3);
  }
  90%,
  100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
}

.pulsar-failover-standby #failover-standby-pkt-p {
  animation: failover-standby-pkt-p-anim 5500ms linear infinite;
}

@keyframes failover-standby-pkt-p-anim {
  0%,
  28% {
    opacity: 1;
    transform: translate(0, 0);
  }
  34%,
  86% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.pulsar-failover-standby #failover-standby-pkt-s {
  animation: failover-standby-pkt-s-anim 5500ms linear infinite;
}

@keyframes failover-standby-pkt-s-anim {
  0%,
  38% {
    opacity: 0;
  }
  44%,
  80% {
    opacity: 1;
    transform: translate(4px, 4px);
  }
  86%,
  100% {
    opacity: 0;
  }
}

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

From this family15 in Failover

See the family