Pulsar

Probe

CSS

A vertical measuring probe descends to touch a flat horizontal surface, a circular pulse radiating from the contact point.

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

Companion assets

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

Animated
CSS tier
Static vector
Probe, 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-probe" data-pulsar="calibrate-probe" viewBox="0 0 160 96"><line x1="32" x2="128" y1="68" y2="68" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></line><line x1="42" x2="38" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><line x1="58" x2="54" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><line x1="74" x2="70" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><line x1="90" x2="86" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><line x1="106" x2="102" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><line x1="122" x2="118" y1="68" y2="76" stroke-width="1.2" opacity=".3"></line><g class="calibrate-probe-arm"><line x1="80" x2="80" y1="12" y2="40" stroke-width="2.5"></line><circle cx="80" cy="40" r="3.5" fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5"></circle></g><circle cx="80" cy="68" r="6" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="calibrate-probe-wave w1"></circle><circle cx="80" cy="68" r="14" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="calibrate-probe-wave w2"></circle></svg>

animation.css

.pulsar-calibrate-probe {
  display: block;
  overflow: visible;
}
.pulsar-calibrate-probe .calibrate-probe-arm {
  animation: calibrate-probe-touch 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-calibrate-probe .w1 {
  transform-origin: 80px 68px;
  animation: calibrate-probe-ripple 4000ms ease-out infinite;
}
.pulsar-calibrate-probe .w2 {
  transform-origin: 80px 68px;
  animation: calibrate-probe-ripple 4000ms ease-out -3820ms infinite;
}

@keyframes calibrate-probe-touch {
  0% {
    transform: translateY(0px);
  }
  35%,
  75% {
    transform: translateY(24px);
  }
  92%,
  100% {
    transform: translateY(0px);
  }
}

@keyframes calibrate-probe-ripple {
  0%,
  34% {
    transform: scale(0.4);
    opacity: 0;
  }
  38% {
    opacity: 0.9;
  }
  60%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-calibrate-probe .calibrate-probe-arm,
  .pulsar-calibrate-probe .w1,
  .pulsar-calibrate-probe .w2 {
    animation: none;
    transform: translateY(24px);
    opacity: 1;
  }
  .pulsar-calibrate-probe .w1,
  .pulsar-calibrate-probe .w2 {
    opacity: 0;
  }
}

From this family15 in Calibrate

See the family