Pulsar

Traceability

CSS

A genealogy tracking line traces backward through a branching parent-child component hierarchy to reveal parts provenance.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Decorative and illustrative
Use cases
Security and trust, Workflow and approvals
Industries
Manufacturing and industrial, Cross-industry
Style
Duotone · regular stroke
Set
bom
Tags
linedotsglow

Companion assets

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

Animated
CSS tier
Static vector
Traceability, 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-traceability" data-pulsar="bom-traceability" viewBox="0 0 160 96"><path stroke-width="1.5" d="M32 38h36m0 0 36 10M68 62l36-14m0 0h30" class="tree-line" opacity=".3"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M134 48h-30L68 38H32" class="trace-pulse"></path><circle cx="32" cy="38" r="4.5" fill="var(--pulsar-accent, currentColor)" fill-opacity=".25" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="origin-node"></circle><circle cx="68" cy="38" r="4" fill="currentColor" fill-opacity=".1" stroke-width="1.5" class="sub-node1"></circle><circle cx="68" cy="62" r="4" stroke-width="1.5" class="sub-node2" opacity=".3"></circle><circle cx="104" cy="48" r="4.5" stroke-width="1.5" class="assy-node"></circle><circle cx="134" cy="48" r="6" fill="var(--pulsar-accent, currentColor)" fill-opacity=".2" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="final-node"></circle></svg>

animation.css

.pulsar-bom-traceability {
  display: block;
  overflow: visible;
}
.pulsar-bom-traceability .trace-pulse {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: bom-traceability-trace 4000ms ease-in-out infinite;
}
.pulsar-bom-traceability .final-node {
  animation: bom-traceability-final 4000ms ease-in-out infinite;
}
.pulsar-bom-traceability .origin-node {
  animation: bom-traceability-origin 4000ms ease-in-out infinite;
}
.pulsar-bom-traceability .tree-line {
  animation: bom-traceability-tree 4000ms ease-in-out infinite;
}

@keyframes bom-traceability-trace {
  0%,
  15% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  60%,
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  95%,
  100% {
    stroke-dashoffset: -120;
    opacity: 0;
  }
}

@keyframes bom-traceability-final {
  0%,
  20% {
    transform: scale(1.15);
    opacity: 1;
  }
  40%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

@keyframes bom-traceability-origin {
  0%,
  55% {
    transform: scale(1);
    opacity: 0.4;
  }
  70%,
  90% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
}

@keyframes bom-traceability-tree {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-bom-traceability .trace-pulse {
    stroke-dashoffset: 0;
    opacity: 1;
    animation: none;
  }
  .pulsar-bom-traceability .final-node,
  .pulsar-bom-traceability .origin-node,
  .pulsar-bom-traceability .tree-line {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Bom

See the family