Pulsar

Assembly Tree

CSS

A vertical tree diagram of connected dots expands downwards as branch lines draw themselves to reveal sub-assemblies.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Decorative and illustrative
Use cases
Dashboards and reporting, Documents and files
Industries
Manufacturing and industrial, Cross-industry
Style
Duotone · regular stroke
Set
bom
Tags
linedotsminimal

Companion assets

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

Animated
CSS tier
Static vector
Assembly Tree, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-bom-assembly-tree" data-pulsar="bom-assembly-tree" viewBox="0 0 160 96"><path stroke-width="1.5" d="M80 26v12H52v12m28-12h28v12" class="branch-tier1" opacity=".35"></path><path stroke-width="1.5" d="M52 56v8H36v8m16-8h16v8m40-16v8H92v8m16-8h16v8" class="branch-tier2" opacity=".3"></path><circle cx="80" cy="22" r="5" fill="var(--pulsar-accent, currentColor)" fill-opacity=".2" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="node-root"></circle><circle cx="52" cy="52" r="4" fill="currentColor" fill-opacity=".1" stroke-width="1.5" class="node-mid n1"></circle><circle cx="108" cy="52" r="4" fill="currentColor" fill-opacity=".1" stroke-width="1.5" class="node-mid n2"></circle><circle cx="36" cy="74" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="node-leaf l1"></circle><circle cx="68" cy="74" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="node-leaf l2"></circle><circle cx="92" cy="74" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="node-leaf l3"></circle><circle cx="124" cy="74" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="node-leaf l4"></circle></svg>

animation.css

.pulsar-bom-assembly-tree {
  display: block;
  overflow: visible;
}
.pulsar-bom-assembly-tree .branch-tier1 {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: bom-assembly-tree-t1 4000ms ease-in-out infinite;
}
.pulsar-bom-assembly-tree .branch-tier2 {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: bom-assembly-tree-t2 4000ms ease-in-out infinite;
}
.pulsar-bom-assembly-tree .node-root {
  animation: bom-assembly-tree-root 4000ms ease-in-out infinite;
}
.pulsar-bom-assembly-tree .node-mid {
  animation: bom-assembly-tree-mid 4000ms ease-in-out infinite;
}
.pulsar-bom-assembly-tree .node-leaf {
  animation: bom-assembly-tree-leaf 4000ms ease-in-out infinite;
}

@keyframes bom-assembly-tree-t1 {
  0%,
  15% {
    stroke-dashoffset: 80;
    opacity: 0;
  }
  35%,
  85% {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
  95%,
  100% {
    stroke-dashoffset: 80;
    opacity: 0;
  }
}

@keyframes bom-assembly-tree-t2 {
  0%,
  35% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
  55%,
  85% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  95%,
  100% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
}

@keyframes bom-assembly-tree-root {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  25%,
  75% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes bom-assembly-tree-mid {
  0%,
  30% {
    transform: scale(0.8);
    opacity: 0.2;
  }
  45%,
  80% {
    transform: scale(1);
    opacity: 0.8;
  }
  95%,
  100% {
    transform: scale(0.8);
    opacity: 0.2;
  }
}

@keyframes bom-assembly-tree-leaf {
  0%,
  50% {
    transform: scale(0.7);
    opacity: 0.2;
  }
  65%,
  80% {
    transform: scale(1.1);
    opacity: 1;
  }
  95%,
  100% {
    transform: scale(0.7);
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-bom-assembly-tree .branch-tier1,
  .pulsar-bom-assembly-tree .branch-tier2 {
    stroke-dashoffset: 0;
    opacity: 0.6;
    animation: none;
  }
  .pulsar-bom-assembly-tree .node-root,
  .pulsar-bom-assembly-tree .node-mid,
  .pulsar-bom-assembly-tree .node-leaf {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Bom

See the family