Pulsar

Drift

CSS

A drifting measurement plot line is pulled back toward a central zero axis, illustrating correction for sensor drift.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Dashboards and reporting
Industries
Manufacturing and industrial, Cross-industry
Style
Technical · light stroke
Set
calibrate
Tags
lineminimalstrokechartdots

Companion assets

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

Animated
CSS tier
Static vector
Drift, 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-calibrate-drift" data-pulsar="calibrate-drift" viewBox="0 0 160 96"><line x1="28" x2="132" y1="48" y2="48" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></line><line x1="28" x2="132" y1="28" y2="28" stroke-dasharray="2 3" opacity=".3"></line><line x1="28" x2="132" y1="68" y2="68" stroke-dasharray="2 3" opacity=".3"></line><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M32 48q33-24 63-10t33 10" class="calibrate-drift-trace"></path><g class="calibrate-drift-vector"><line x1="80" x2="80" y1="30" y2="46" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.8"></line><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="1.8" points="77 42, 80 46, 83 42"></polyline><circle cx="80" cy="30" r="2" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g></svg>

animation.css

.pulsar-calibrate-drift {
  display: block;
  overflow: visible;
}
.pulsar-calibrate-drift .calibrate-drift-trace {
  transform-origin: 32px 48px;
  animation: calibrate-drift-correct 4000ms ease-in-out infinite;
}
.pulsar-calibrate-drift .calibrate-drift-vector {
  animation: calibrate-drift-arrow 4000ms ease-in-out infinite;
}

@keyframes calibrate-drift-correct {
  0% {
    transform: scaleY(1.4);
  }
  50%,
  75% {
    transform: scaleY(0.1);
  }
  92%,
  100% {
    transform: scaleY(1.4);
  }
}

@keyframes calibrate-drift-arrow {
  0% {
    transform: translateY(-4px);
    opacity: 0.3;
  }
  35%,
  65% {
    transform: translateY(0px);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateY(-4px);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-calibrate-drift .calibrate-drift-trace,
  .pulsar-calibrate-drift .calibrate-drift-vector {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Calibrate

See the family