Pulsar

Clearing Nodes

CSS

A constellation of small node points on a grid slowly link and unlink with faint, fading connection lines.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Backgrounds and ambient
Use cases
Sync and integration, Ambient background
Industries
Finance and fintech, Cross-industry
Style
Technical · light stroke
Set
treasury
Tags
dotslinefadeambient

Companion assets

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

Animated
CSS tier
Static vector
Clearing Nodes, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-treasury-nodes" data-pulsar="treasury-nodes" viewBox="0 0 160 96"><g stroke-width="1.25" class="link-network"><line x1="40" x2="80" y1="30" y2="30" stroke="currentColor" class="link l1"></line><line x1="80" x2="120" y1="30" y2="40" stroke="var(--pulsar-accent, currentColor)" class="link l2"></line><line x1="40" x2="60" y1="30" y2="66" stroke="var(--pulsar-accent, currentColor)" class="link l3"></line><line x1="60" x2="100" y1="66" y2="66" stroke="currentColor" class="link l4"></line><line x1="100" x2="120" y1="66" y2="40" stroke="currentColor" class="link l5"></line><line x1="80" x2="100" y1="30" y2="66" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="3 3" class="link l6"></line></g><g fill="currentColor" class="clearing-nodes"><circle cx="40" cy="30" r="3" class="node n1"></circle><circle cx="80" cy="30" r="3.5" fill="var(--pulsar-accent, currentColor)" class="node n2"></circle><circle cx="120" cy="40" r="3" class="node n3"></circle><circle cx="60" cy="66" r="3" class="node n4"></circle><circle cx="100" cy="66" r="3.5" fill="var(--pulsar-accent, currentColor)" class="node n5"></circle></g><g class="node-auras"><circle cx="80" cy="30" r="7" stroke="var(--pulsar-accent, currentColor)" class="aura a1"></circle><circle cx="100" cy="66" r="7" stroke="var(--pulsar-accent, currentColor)" class="aura a2"></circle></g></svg>

animation.css

.pulsar-treasury-nodes {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-treasury-nodes .link.l1,
.pulsar-treasury-nodes .link.l4 {
  animation: treasury-nodes-fade-a 4s ease-in-out infinite;
}
.pulsar-treasury-nodes .link.l2,
.pulsar-treasury-nodes .link.l3 {
  animation: treasury-nodes-fade-b 4s ease-in-out infinite;
}
.pulsar-treasury-nodes .link.l5,
.pulsar-treasury-nodes .link.l6 {
  animation: treasury-nodes-fade-c 4s ease-in-out infinite;
}
.pulsar-treasury-nodes .aura.a1 {
  transform-origin: 80px 30px;
  animation: treasury-nodes-pulse 4s ease-in-out infinite;
}
.pulsar-treasury-nodes .aura.a2 {
  transform-origin: 100px 66px;
  animation: treasury-nodes-pulse 4s ease-in-out infinite -2s;
}
@keyframes treasury-nodes-fade-a {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes treasury-nodes-fade-b {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
}
@keyframes treasury-nodes-fade-c {
  0%,
  100% {
    opacity: 0.3;
  }
  30%,
  70% {
    opacity: 0.8;
  }
}
@keyframes treasury-nodes-pulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-treasury-nodes .link.l1,
  .pulsar-treasury-nodes .link.l2,
  .pulsar-treasury-nodes .link.l3,
  .pulsar-treasury-nodes .link.l4,
  .pulsar-treasury-nodes .link.l5,
  .pulsar-treasury-nodes .link.l6,
  .pulsar-treasury-nodes .aura.a1,
  .pulsar-treasury-nodes .aura.a2 {
    animation: none;
    transform: none;
    opacity: 0.5;
  }
}

From this family15 in Treasury

See the family