Pulsar

Sequencing

CSS

Four parallel genetic sequence channels stream discrete nucleotide base markers across horizontal reading lanes.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Backgrounds and ambient
Use cases
Ambient background
Industries
Healthcare and life sciences
Style
Technical · light stroke
Set
assay
Tags
barsminimalloopprogress

Companion assets

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

Animated
CSS tier
Static vector
Sequencing, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-assay-sequencing" data-pulsar="assay-sequencing" viewBox="0 0 160 96"><g stroke="currentColor" stroke-width=".8" class="lanes" opacity=".2"><line x1="20" x2="140" y1="28" y2="28"></line><line x1="20" x2="140" y1="42" y2="42"></line><line x1="20" x2="140" y1="56" y2="56"></line><line x1="20" x2="140" y1="70" y2="70"></line></g><g class="lane-markers"><line x1="24" x2="48" y1="28" y2="28" stroke="currentColor" stroke-linecap="round" stroke-width="2.5" class="mark m1"></line><line x1="30" x2="58" y1="42" y2="42" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2.5" class="mark m2"></line><line x1="20" x2="44" y1="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-width="2.5" class="mark m3"></line><line x1="36" x2="60" y1="70" y2="70" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2.5" class="mark m4"></line></g></svg>

animation.css

.pulsar-assay-sequencing {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-assay-sequencing .mark.m1 {
  animation: assay-sequencing-flow 4s linear infinite;
}
.pulsar-assay-sequencing .mark.m2 {
  animation: assay-sequencing-flow 4s linear infinite -2.8s;
}
.pulsar-assay-sequencing .mark.m3 {
  animation: assay-sequencing-flow 4s linear infinite -1.6s;
}
.pulsar-assay-sequencing .mark.m4 {
  animation: assay-sequencing-flow 4s linear infinite -0.6s;
}
@keyframes assay-sequencing-flow {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(86px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-assay-sequencing .mark.m1,
  .pulsar-assay-sequencing .mark.m2,
  .pulsar-assay-sequencing .mark.m3,
  .pulsar-assay-sequencing .mark.m4 {
    animation: none;
    transform: translateX(40px);
    opacity: 0.8;
  }
}

From this family15 in Assay

See the family