Pulsar

Solder

CSS

A circuit track with a gap has a tiny circle of solder expand in the gap, and then light pulses along the entire track.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Sync and integration
Industries
Security and identity, Cross-industry
Style
Minimal line · light stroke
Set
patch
Tags
glowgeometricminimalstrokeui

Companion assets

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

Animated
CSS tier
Static vector
Solder, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-patch-solder" data-pulsar="patch-solder" viewBox="0 0 160 96"><line x1="30" x2="130" y1="64" y2="64" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity=".4"></line><rect width="32" height="8" x="64" y="60" fill="currentColor" fill-opacity=".1" stroke="currentColor" stroke-width="1.5" rx="2"></rect><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M80 24v26l-8 6"></path><path fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)" d="M68 62q6-2 8-8 2 6 8 8Z" class="patch-solder-fillet"></path><ellipse cx="80" cy="58" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="patch-solder-shimmer" rx="14" ry="7"></ellipse><circle cx="80" cy="58" r="3" fill="var(--pulsar-accent, currentColor)" class="patch-solder-bond-pip"></circle></svg>

animation.css

.pulsar-patch-solder {
  display: block;
  overflow: visible;
}
.pulsar-patch-solder .patch-solder-fillet {
  transform-origin: 80px 60px;
  animation: patch-solder-fillet-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-patch-solder .patch-solder-shimmer {
  transform-origin: 80px 58px;
  animation: patch-solder-shimmer-anim 4200ms ease infinite;
}
.pulsar-patch-solder .patch-solder-bond-pip {
  transform-origin: 80px 58px;
  animation: patch-solder-bond-pip-anim 4200ms ease infinite;
}

@keyframes patch-solder-fillet-anim {
  0%,
  20% {
    transform: scale(0);
    opacity: 0;
  }
  38% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes patch-solder-shimmer-anim {
  0%,
  30% {
    transform: scale(0.6);
    opacity: 0;
  }
  42% {
    opacity: 0.9;
  }
  60% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes patch-solder-bond-pip-anim {
  0%,
  35% {
    transform: scale(0);
    opacity: 0;
  }
  42%,
  80% {
    transform: scale(1);
    opacity: 1;
  }
  90%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

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

From this family15 in Patch

See the family