Pulsar

Column

CSS

A structural column pier pulses under axial load vectors with radiating structural alignment centerlines.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Dashboards and reporting, Security and trust
Industries
Real estate and property, Construction and built environment
Style
Technical · light stroke
Set
floorplate
Tags
geometricpulseminimalloop

Companion assets

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

Animated
CSS tier
Static vector
Column, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-floorplate-column" data-pulsar="floorplate-column" viewBox="0 0 160 96"><line x1="40" x2="120" y1="48" y2="48" stroke="currentColor" stroke-dasharray="3 3" stroke-width=".8" class="cl-h" opacity=".3"></line><line x1="80" x2="80" y1="16" y2="80" stroke="currentColor" stroke-dasharray="3 3" stroke-width=".8" class="cl-v" opacity=".3"></line><rect width="24" height="24" x="68" y="36" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.6" class="pier" rx="2"></rect><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M80 22v8m-3-3 3 3 3-3" class="vector v-top"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M80 74v-8m-3 3 3-3 3 3" class="vector v-bot"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M54 48h8m-3-3 3 3-3 3" class="vector v-l"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M106 48h-8m3-3-3 3 3 3" class="vector v-r"></path></svg>

animation.css

.pulsar-floorplate-column {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-floorplate-column .pier {
  animation: floorplate-column-pulse 4s ease-in-out infinite;
}
.pulsar-floorplate-column .vector.v-top,
.pulsar-floorplate-column .vector.v-bot,
.pulsar-floorplate-column .vector.v-l,
.pulsar-floorplate-column .vector.v-r {
  animation: floorplate-column-vector 4s ease-in-out infinite;
}
@keyframes floorplate-column-pulse {
  0%,
  100% {
    transform: scale(0.92);
    transform-origin: 80px 48px;
    opacity: 0.6;
  }
  50% {
    transform: scale(1.08);
    transform-origin: 80px 48px;
    opacity: 1;
  }
}
@keyframes floorplate-column-vector {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-floorplate-column .pier,
  .pulsar-floorplate-column .vector.v-top,
  .pulsar-floorplate-column .vector.v-bot,
  .pulsar-floorplate-column .vector.v-l,
  .pulsar-floorplate-column .vector.v-r {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Floorplate

See the family