Pulsar

Heartbeat

CSS

A flat cardiac-style trace line goes flat, prompting an auxiliary line to immediately start pulsing underneath it.

Tier
CSS
Dependencies
None
Duration
5.5 s, loops
Categories
Icons and micro-interactions
Use cases
Dashboards and reporting, Notifications
Industries
IT services and infrastructure, Cross-industry
Style
Technical · light stroke
Set
failover
Tags
chartlinelooppulsewave

Companion assets

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

Animated
CSS tier
Static vector
Heartbeat, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-failover-heartbeat" data-pulsar="failover-heartbeat" viewBox="0 0 160 96"><g stroke="currentColor" stroke-dasharray="1 5" opacity=".2"><line x1="16" x2="144" y1="24" y2="24"></line><line x1="16" x2="144" y1="38" y2="38"></line><line x1="16" x2="144" y1="52" y2="52"></line><line x1="16" x2="144" y1="66" y2="66"></line><line x1="16" x2="144" y1="80" y2="80"></line><line x1="48" x2="48" y1="16" y2="88"></line><line x1="80" x2="80" y1="16" y2="88"></line><line x1="112" x2="112" y1="16" y2="88"></line></g><g id="failover-heartbeat-chan-a" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"><path id="failover-heartbeat-wave-a" d="M16 38h24l4-12 4 24 4-18 4 6h18l4-12 4 24 4-18 4 6h54"></path><line id="failover-heartbeat-flat-a" x1="16" x2="144" y1="38" y2="38" opacity="0"></line><circle id="failover-heartbeat-dot-a" cx="144" cy="38" r="2.5" fill="currentColor"></circle></g><g id="failover-heartbeat-chan-b" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"><line id="failover-heartbeat-flat-b" x1="16" x2="144" y1="66" y2="66" opacity=".3"></line><path id="failover-heartbeat-wave-b" d="M16 66h54l4-12 4 24 4-18 4 6h18l4-12 4 24 4-18 4 6h24"></path><circle id="failover-heartbeat-dot-b" cx="144" cy="66" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle></g></svg>

animation.css

.pulsar-failover-heartbeat #failover-heartbeat-wave-a {
  animation: failover-heartbeat-wave-a-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-wave-a-anim {
  0%,
  30% {
    opacity: 1;
  }
  38%,
  84% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}

.pulsar-failover-heartbeat #failover-heartbeat-flat-a {
  animation: failover-heartbeat-flat-a-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-flat-a-anim {
  0%,
  30% {
    opacity: 0;
  }
  38%,
  84% {
    opacity: 0.4;
  }
  92%,
  100% {
    opacity: 0;
  }
}

.pulsar-failover-heartbeat #failover-heartbeat-dot-a {
  animation: failover-heartbeat-dot-a-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-dot-a-anim {
  0%,
  30% {
    opacity: 1;
  }
  38%,
  84% {
    opacity: 0.2;
  }
  92%,
  100% {
    opacity: 1;
  }
}

.pulsar-failover-heartbeat #failover-heartbeat-wave-b {
  animation: failover-heartbeat-wave-b-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-wave-b-anim {
  0%,
  36% {
    opacity: 0;
  }
  44%,
  82% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}

.pulsar-failover-heartbeat #failover-heartbeat-flat-b {
  animation: failover-heartbeat-flat-b-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-flat-b-anim {
  0%,
  36% {
    opacity: 0.3;
  }
  44%,
  82% {
    opacity: 0;
  }
  90%,
  100% {
    opacity: 0.3;
  }
}

.pulsar-failover-heartbeat #failover-heartbeat-dot-b {
  animation: failover-heartbeat-dot-b-anim 5500ms ease-in-out infinite;
}

@keyframes failover-heartbeat-dot-b-anim {
  0%,
  38% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  46%,
  82% {
    opacity: 1;
    transform: scale(1.3);
  }
  90%,
  100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
}

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

From this family15 in Failover

See the family