Pulsar
Three DNS query nodes converging their resolution vectors to a central anchor

DNS Resolver

CSS

Three peripheral query nodes converge their resolution rays onto a central authoritative anchor that locks upon address confirmation.

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

Companion assets

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

Animated
Three DNS query nodes converging their resolution vectors to a central anchor
CSS tier
Static vector
DNS Resolver, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-dns-title" class="pulsar pulsar-endpoint-dns" data-pulsar="endpoint-dns" role="img" viewBox="0 0 160 96"><title id="endpoint-dns-title">Three DNS query nodes converging their resolution vectors to a central anchor</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-dns-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-dns-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line x1="112" x2="112" y1="28" y2="68" stroke-dasharray="2 3"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-dns-ray-1" x1="46" x2="112" y1="32" y2="48" stroke-dasharray="68" stroke-dashoffset="68"></line><line id="endpoint-dns-ray-2" x1="38" x2="112" y1="48" y2="48" stroke-dasharray="74" stroke-dashoffset="74"></line><line id="endpoint-dns-ray-3" x1="46" x2="112" y1="64" y2="48" stroke-dasharray="68" stroke-dashoffset="68"></line></g><g id="endpoint-dns-node-1" fill="currentColor"><circle cx="46" cy="32" r="3"></circle><circle cx="46" cy="32" r="6" fill="none" stroke="currentColor" stroke-width=".75" opacity=".5"></circle></g><g id="endpoint-dns-node-2" fill="currentColor"><circle cx="38" cy="48" r="3"></circle><circle cx="38" cy="48" r="6" fill="none" stroke="currentColor" stroke-width=".75" opacity=".5"></circle></g><g id="endpoint-dns-node-3" fill="currentColor"><circle cx="46" cy="64" r="3"></circle><circle cx="46" cy="64" r="6" fill="none" stroke="currentColor" stroke-width=".75" opacity=".5"></circle></g><g id="endpoint-dns-target"><polygon fill="none" stroke="currentColor" stroke-width="1.25" points="112,40 120,48 112,56 104,48"></polygon><circle id="endpoint-dns-target-core" cx="112" cy="48" r="2.5" fill="currentColor"></circle><circle id="endpoint-dns-target-ring" cx="112" cy="48" r="9" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></g></svg>

animation.css

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

.pulsar-endpoint-dns #endpoint-dns-target-core,
.pulsar-endpoint-dns #endpoint-dns-node-1 circle:first-child,
.pulsar-endpoint-dns #endpoint-dns-node-2 circle:first-child,
.pulsar-endpoint-dns #endpoint-dns-node-3 circle:first-child {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-dns #endpoint-dns-target polygon,
.pulsar-endpoint-dns #endpoint-dns-target-ring,
.pulsar-endpoint-dns #endpoint-dns-ray-1,
.pulsar-endpoint-dns #endpoint-dns-ray-2,
.pulsar-endpoint-dns #endpoint-dns-ray-3 {
  stroke: var(--pulsar-accent, currentColor);
}

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

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

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

.pulsar-endpoint-dns #endpoint-dns-node-1 {
  animation: endpoint-dns-node-pulse-1 3600ms ease-in-out infinite;
  transform-origin: 46px 32px;
}

.pulsar-endpoint-dns #endpoint-dns-node-2 {
  animation: endpoint-dns-node-pulse-2 3600ms ease-in-out infinite;
  transform-origin: 38px 48px;
}

.pulsar-endpoint-dns #endpoint-dns-node-3 {
  animation: endpoint-dns-node-pulse-3 3600ms ease-in-out infinite;
  transform-origin: 46px 64px;
}

.pulsar-endpoint-dns #endpoint-dns-target-ring {
  animation: endpoint-dns-lock-ring 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 112px 48px;
}

@keyframes endpoint-dns-draw-1 {
  0%,
  10% {
    stroke-dashoffset: 68;
    opacity: 0.3;
  }
  38%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: -68;
    opacity: 0;
  }
}

@keyframes endpoint-dns-draw-2 {
  0%,
  18% {
    stroke-dashoffset: 74;
    opacity: 0.3;
  }
  44%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: -74;
    opacity: 0;
  }
}

@keyframes endpoint-dns-draw-3 {
  0%,
  26% {
    stroke-dashoffset: 68;
    opacity: 0.3;
  }
  50%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: -68;
    opacity: 0;
  }
}

@keyframes endpoint-dns-node-pulse-1 {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  12% {
    transform: scale(1.2);
    opacity: 1;
  }
  24%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes endpoint-dns-node-pulse-2 {
  0%,
  10% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  22% {
    transform: scale(1.2);
    opacity: 1;
  }
  34%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes endpoint-dns-node-pulse-3 {
  0%,
  20% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  32% {
    transform: scale(1.2);
    opacity: 1;
  }
  44%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes endpoint-dns-lock-ring {
  0%,
  48% {
    opacity: 0;
    transform: scale(0.5);
  }
  54% {
    opacity: 0.9;
  }
  72% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-dns * {
    animation: none !important;
    transform: none;
  }
  .pulsar-endpoint-dns #endpoint-dns-ray-1,
  .pulsar-endpoint-dns #endpoint-dns-ray-2,
  .pulsar-endpoint-dns #endpoint-dns-ray-3 {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

From this family15 in Endpoint

See the family