Pulsar
Two bracketed nodes establishing an authenticated handshake connection

Secure Handshake

CSS

Two technical bracketed nodes converge along an alignment axis, bridging an authenticated connection line that locks upon handshake verification.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Success and confirmation, Security and trust
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
looplinepulseui

Companion assets

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

Animated
Two bracketed nodes establishing an authenticated handshake connection
CSS tier
Static vector
Secure Handshake, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-handshake-title" class="pulsar pulsar-endpoint-handshake" data-pulsar="endpoint-handshake" role="img" viewBox="0 0 160 96"><title id="endpoint-handshake-title">Two bracketed nodes establishing an authenticated handshake connection</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-handshake-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-handshake-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line id="endpoint-handshake-center-mark" x1="80" x2="80" y1="36" y2="60" stroke-dasharray="2 3"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><g id="endpoint-handshake-node-left"><path d="M44 36h-8v24h8"></path><line x1="40" x2="40" y1="42" y2="54"></line><circle id="endpoint-handshake-pin-left" cx="44" cy="48" r="2.5" fill="currentColor"></circle></g><g id="endpoint-handshake-node-right"><path d="M116 36h8v24h-8"></path><line x1="120" x2="120" y1="42" y2="54"></line><circle id="endpoint-handshake-pin-right" cx="116" cy="48" r="2.5" fill="currentColor"></circle></g><line id="endpoint-handshake-bridge" x1="46" x2="114" y1="48" y2="48" stroke-dasharray="68" stroke-dashoffset="68"></line></g><circle id="endpoint-handshake-pulse" cx="80" cy="48" r="4" fill="none" stroke="currentColor" stroke-width="1"></circle><polygon id="endpoint-handshake-lock" fill="currentColor" points="80,44 84,48 80,52 76,48"></polygon></svg>

animation.css

.pulsar-endpoint-handshake {
  --pulsar-accent: currentColor;
}

.pulsar-endpoint-handshake #endpoint-handshake-lock,
.pulsar-endpoint-handshake #endpoint-handshake-pulse {
  color: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-handshake #endpoint-handshake-bridge {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-handshake #endpoint-handshake-pin-left,
.pulsar-endpoint-handshake #endpoint-handshake-pin-right {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-handshake #endpoint-handshake-node-left {
  animation: endpoint-handshake-shift-left 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 40px 48px;
}

.pulsar-endpoint-handshake #endpoint-handshake-node-right {
  animation: endpoint-handshake-shift-right 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 120px 48px;
}

.pulsar-endpoint-handshake #endpoint-handshake-bridge {
  animation: endpoint-handshake-draw-bridge 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-endpoint-handshake #endpoint-handshake-lock {
  animation: endpoint-handshake-lock-pulse 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

.pulsar-endpoint-handshake #endpoint-handshake-pulse {
  animation: endpoint-handshake-ring 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

@keyframes endpoint-handshake-shift-left {
  0%,
  10% {
    transform: translateX(0);
  }
  30%,
  80% {
    transform: translateX(8px);
  }
  95%,
  100% {
    transform: translateX(0);
  }
}

@keyframes endpoint-handshake-shift-right {
  0%,
  10% {
    transform: translateX(0);
  }
  30%,
  80% {
    transform: translateX(-8px);
  }
  95%,
  100% {
    transform: translateX(0);
  }
}

@keyframes endpoint-handshake-draw-bridge {
  0%,
  20% {
    stroke-dashoffset: 68;
    opacity: 0.4;
  }
  45%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  90%,
  100% {
    stroke-dashoffset: -68;
    opacity: 0;
  }
}

@keyframes endpoint-handshake-lock-pulse {
  0%,
  40% {
    opacity: 0;
    transform: scale(0);
  }
  48% {
    opacity: 1;
    transform: scale(1.3);
  }
  56%,
  80% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes endpoint-handshake-ring {
  0%,
  44% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.8;
  }
  70% {
    opacity: 0;
    transform: scale(3.5);
  }
  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-handshake * {
    animation: none !important;
  }
  .pulsar-endpoint-handshake #endpoint-handshake-bridge {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .pulsar-endpoint-handshake #endpoint-handshake-lock {
    opacity: 1;
    transform: scale(1);
  }
}

From this family15 in Endpoint

See the family