Pulsar
Monolithic database node splitting into three horizontal shards allocated to distributed worker slotsshard:0shard:1shard:2

Cluster Database Shard

CSS

A monolithic database node divides into three distinct shards that slide horizontally into designated distributed worker chassis slots.

Tier
CSS
Dependencies
None
Duration
6 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Automation and rules
Industries
SaaS and software, IT services and infrastructure
Style
Minimal line · light stroke
Set
cluster
Tags
loopgeometricbarsui

Companion assets

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

Animated
Monolithic database node splitting into three horizontal shards allocated to distributed worker slotsshard:0shard:1shard:2
CSS tier
Static vector
Cluster Database Shard, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-shard-title" class="pulsar pulsar-cluster-shard" data-pulsar="cluster-shard" role="img" viewBox="0 0 160 96"><title id="cluster-shard-title">Monolithic database node splitting into three horizontal shards allocated to distributed worker slots</title><g fill="none" stroke="currentColor" stroke-dasharray="2 3" stroke-width=".6" opacity=".25"><rect width="32" height="48" x="22" y="24" rx="2"></rect><rect width="32" height="48" x="64" y="24" rx="2"></rect><rect width="32" height="48" x="106" y="24" rx="2"></rect></g><g fill="currentColor" font-family="monospace" font-size="4" opacity=".35" text-anchor="middle"><text x="38" y="80">shard:0</text><text x="80" y="80">shard:1</text><text x="122" y="80">shard:2</text></g><g id="cluster-shard-s1"><rect width="8" height="40" x="67" y="28" fill="none" stroke="currentColor" rx="1"></rect><rect width="4" height="32" x="69" y="32" fill="currentColor" opacity=".4"></rect></g><g id="cluster-shard-s2"><rect width="8" height="40" x="76" y="28" fill="none" stroke="currentColor" rx="1"></rect><rect width="4" height="32" x="78" y="32" fill="currentColor" opacity=".4"></rect></g><g id="cluster-shard-s3"><rect width="8" height="40" x="85" y="28" fill="none" stroke="currentColor" rx="1"></rect><rect width="4" height="32" x="87" y="32" fill="currentColor" opacity=".4"></rect></g><line id="cluster-shard-laser1" x1="75.5" x2="75.5" y1="26" y2="70" fill="none" stroke="currentColor" stroke-width="1.2" opacity="0"></line><line id="cluster-shard-laser2" x1="84.5" x2="84.5" y1="26" y2="70" fill="none" stroke="currentColor" stroke-width="1.2" opacity="0"></line></svg>

animation.css

.pulsar-cluster-shard {
  --pulsar-accent: currentColor;
}

.pulsar-cluster-shard #cluster-shard-laser1,
.pulsar-cluster-shard #cluster-shard-laser2 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-shard #cluster-shard-s1 rect:last-child,
.pulsar-cluster-shard #cluster-shard-s2 rect:last-child,
.pulsar-cluster-shard #cluster-shard-s3 rect:last-child {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-shard #cluster-shard-laser1,
.pulsar-cluster-shard #cluster-shard-laser2 {
  animation: cluster-shard-slice 6000ms ease-in-out infinite;
}

@keyframes cluster-shard-slice {
  0%,
  15% {
    opacity: 0;
  }
  22%,
  32% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}

.pulsar-cluster-shard #cluster-shard-s1 {
  animation: cluster-shard-move-l 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes cluster-shard-move-l {
  0%,
  28% {
    transform: translateX(0);
  }
  48%,
  82% {
    transform: translateX(-33px);
  }
  94%,
  100% {
    transform: translateX(0);
  }
}

.pulsar-cluster-shard #cluster-shard-s3 {
  animation: cluster-shard-move-r 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes cluster-shard-move-r {
  0%,
  28% {
    transform: translateX(0);
  }
  48%,
  82% {
    transform: translateX(33px);
  }
  94%,
  100% {
    transform: translateX(0);
  }
}

.pulsar-cluster-shard #cluster-shard-s1 rect:last-child,
.pulsar-cluster-shard #cluster-shard-s2 rect:last-child,
.pulsar-cluster-shard #cluster-shard-s3 rect:last-child {
  animation: cluster-shard-glow 6000ms ease-in-out infinite;
}

@keyframes cluster-shard-glow {
  0%,
  35% {
    opacity: 0.3;
  }
  50%,
  80% {
    opacity: 0.9;
  }
  92%,
  100% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-shard * {
    animation: none !important;
  }
  .pulsar-cluster-shard #cluster-shard-s1 {
    transform: translateX(-33px);
  }
  .pulsar-cluster-shard #cluster-shard-s3 {
    transform: translateX(33px);
  }
  .pulsar-cluster-shard #cluster-shard-s1 rect:last-child,
  .pulsar-cluster-shard #cluster-shard-s2 rect:last-child,
  .pulsar-cluster-shard #cluster-shard-s3 rect:last-child {
    opacity: 0.8;
  }
}

From this family15 in Cluster

See the family