Pulsar
Gauge sparkline

Gauge Sparkline

CSS

A sparkline draws itself left to right, its shaded area fades in beneath and a dot pops onto the final point, then the line unwinds and redraws.

Tier
CSS
Dependencies
None
Duration
3 s, loops
Categories
Data and progress
Use cases
Dashboards and reporting, Sync and integration
Industries
Finance and fintech, Marketing and sales
Style
Data mark · regular stroke
Set
gauge
Tags
chartlinestrokeloopprogress

Companion assets

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

Animated
Gauge sparkline
CSS tier
Static vector
Gauge Sparkline, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="gauge-sparkline-title" class="pulsar pulsar-gauge-sparkline" data-pulsar="gauge-sparkline" role="img" viewBox="0 0 96 96"><title id="gauge-sparkline-title">Gauge sparkline</title><line id="gauge-sparkline-baseline" x1="10" x2="86" y1="80" y2="80" stroke="currentColor" stroke-linecap="round" stroke-width="6" opacity=".2"></line><polygon id="gauge-sparkline-area" fill="currentColor" fill-opacity=".12" points="12,66 26,54 38,60 52,38 64,46 76,28 84,34 84,80 12,80"></polygon><polyline id="gauge-sparkline-line" fill="none" stroke="currentColor" stroke-dasharray="104" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" points="12,66 26,54 38,60 52,38 64,46 76,28 84,34"></polyline><circle id="gauge-sparkline-dot" cx="84" cy="34" r="5" fill="currentColor"></circle></svg>

animation.css

.pulsar-gauge-sparkline #gauge-sparkline-baseline {
  stroke: currentColor;
  opacity: 0.2;
}

.pulsar-gauge-sparkline #gauge-sparkline-area {
  fill: var(--pulsar-accent, currentColor);
  fill-opacity: 0.12;
  opacity: 1;
  animation: gauge-sparkline-area 3000ms linear infinite;
}

.pulsar-gauge-sparkline #gauge-sparkline-line {
  stroke: var(--pulsar-accent, currentColor);
  stroke-dasharray: 104;
  stroke-dashoffset: 0;
  animation: gauge-sparkline-line 3000ms linear infinite;
}

.pulsar-gauge-sparkline #gauge-sparkline-dot {
  fill: var(--pulsar-accent, currentColor);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  animation: gauge-sparkline-dot 3000ms linear infinite;
}

@keyframes gauge-sparkline-line {
  0% {
    stroke-dashoffset: 0;
  }
  17% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  30% {
    stroke-dashoffset: 104;
  }
  35% {
    stroke-dashoffset: 104;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes gauge-sparkline-area {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
    animation-timing-function: linear;
  }
  22% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    animation-timing-function: linear;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes gauge-sparkline-dot {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  19% {
    transform: scale(0);
  }
  75% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  85% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-gauge-sparkline #gauge-sparkline-line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .pulsar-gauge-sparkline #gauge-sparkline-area {
    animation: none;
    opacity: 1;
  }

  .pulsar-gauge-sparkline #gauge-sparkline-dot {
    animation: none;
    transform: scale(1);
  }
}

From this family5 in Gauge

See the family