Rebuild
CSSA segmented container image disassembled into floating blocks converges and locks together with a verification flash.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Icons and micro-interactions, Data and progress
- Use cases
- Sync and integration, Automation and rules
- Industries
- SaaS and software, Cross-industry
- Style
- Technical · light stroke
- Set
- deploy
- Tags
- loopprogresslineui
Companion assets
The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-rebuild-title" class="pulsar pulsar-deploy-rebuild" data-pulsar="deploy-rebuild" role="img" viewBox="0 0 160 96"><title id="deploy-rebuild-title">Segmented container image blocks converging and locking together during system rebuild</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-rebuild-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-rebuild-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line x1="80" x2="80" y1="18" y2="78" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25" opacity=".5"><path d="M54 28h-6v6"></path><path d="M106 28h6v6"></path><path d="M54 68h-6v-6"></path><path d="M106 68h6v-6"></path></g><g id="deploy-rebuild-block-tl"><rect width="16" height="16" x="62" y="30" fill="none" stroke="currentColor" stroke-width="1.25" rx="2"></rect><line x1="66" x2="74" y1="38" y2="38" stroke="currentColor" stroke-width="1.2" opacity=".6"></line></g><g id="deploy-rebuild-block-tr"><rect width="16" height="16" x="82" y="30" fill="none" stroke="currentColor" stroke-width="1.25" rx="2"></rect><line x1="86" x2="94" y1="38" y2="38" stroke="currentColor" stroke-width="1.2" opacity=".6"></line></g><g id="deploy-rebuild-block-bl"><rect width="16" height="16" x="62" y="50" fill="none" stroke="currentColor" stroke-width="1.25" rx="2"></rect><line x1="66" x2="74" y1="58" y2="58" stroke="currentColor" stroke-width="1.2" opacity=".6"></line></g><g id="deploy-rebuild-block-br"><rect width="16" height="16" x="82" y="50" fill="none" stroke="currentColor" stroke-width="1.25" rx="2"></rect><line x1="86" x2="94" y1="58" y2="58" stroke="currentColor" stroke-width="1.2" opacity=".6"></line></g><circle id="deploy-rebuild-core" cx="80" cy="48" r="2.5" fill="currentColor"></circle><circle id="deploy-rebuild-pulse" cx="80" cy="48" r="12" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>
animation.css
.pulsar-deploy-rebuild {
--pulsar-accent: currentColor;
}
.pulsar-deploy-rebuild #deploy-rebuild-core {
fill: var(--pulsar-accent, currentColor);
}
.pulsar-deploy-rebuild #deploy-rebuild-pulse {
stroke: var(--pulsar-accent, currentColor);
}
.pulsar-deploy-rebuild #deploy-rebuild-block-tl {
animation: deploy-rebuild-move-tl 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 70px 38px;
}
.pulsar-deploy-rebuild #deploy-rebuild-block-tr {
animation: deploy-rebuild-move-tr 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 90px 38px;
}
.pulsar-deploy-rebuild #deploy-rebuild-block-bl {
animation: deploy-rebuild-move-bl 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 70px 58px;
}
.pulsar-deploy-rebuild #deploy-rebuild-block-br {
animation: deploy-rebuild-move-br 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 90px 58px;
}
.pulsar-deploy-rebuild #deploy-rebuild-pulse {
animation: deploy-rebuild-ring 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 80px 48px;
}
@keyframes deploy-rebuild-move-tl {
0%,
15% {
transform: translate(-10px, -8px) rotate(-3deg);
stroke: currentColor;
opacity: 0.6;
}
30%,
60% {
transform: translate(-6px, -4px) rotate(-1deg);
opacity: 0.8;
}
68%,
88% {
transform: translate(0, 0) rotate(0deg);
stroke: var(--pulsar-accent, currentColor);
opacity: 1;
}
96%,
100% {
transform: translate(-10px, -8px) rotate(-3deg);
stroke: currentColor;
opacity: 0.6;
}
}
@keyframes deploy-rebuild-move-tr {
0%,
15% {
transform: translate(10px, -8px) rotate(3deg);
stroke: currentColor;
opacity: 0.6;
}
30%,
60% {
transform: translate(6px, -4px) rotate(1deg);
opacity: 0.8;
}
68%,
88% {
transform: translate(0, 0) rotate(0deg);
stroke: var(--pulsar-accent, currentColor);
opacity: 1;
}
96%,
100% {
transform: translate(10px, -8px) rotate(3deg);
stroke: currentColor;
opacity: 0.6;
}
}
@keyframes deploy-rebuild-move-bl {
0%,
15% {
transform: translate(-10px, 8px) rotate(3deg);
stroke: currentColor;
opacity: 0.6;
}
30%,
60% {
transform: translate(-6px, 4px) rotate(1deg);
opacity: 0.8;
}
68%,
88% {
transform: translate(0, 0) rotate(0deg);
stroke: var(--pulsar-accent, currentColor);
opacity: 1;
}
96%,
100% {
transform: translate(-10px, 8px) rotate(3deg);
stroke: currentColor;
opacity: 0.6;
}
}
@keyframes deploy-rebuild-move-br {
0%,
15% {
transform: translate(10px, 8px) rotate(-3deg);
stroke: currentColor;
opacity: 0.6;
}
30%,
60% {
transform: translate(6px, 4px) rotate(-1deg);
opacity: 0.8;
}
68%,
88% {
transform: translate(0, 0) rotate(0deg);
stroke: var(--pulsar-accent, currentColor);
opacity: 1;
}
96%,
100% {
transform: translate(10px, 8px) rotate(-3deg);
stroke: currentColor;
opacity: 0.6;
}
}
@keyframes deploy-rebuild-ring {
0%,
66% {
opacity: 0;
transform: scale(0.5);
}
72% {
opacity: 0.95;
}
86% {
opacity: 0;
transform: scale(2.4);
}
100% {
opacity: 0;
transform: scale(2.4);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-deploy-rebuild * {
animation: none !important;
transform: none;
}
.pulsar-deploy-rebuild #deploy-rebuild-block-tl,
.pulsar-deploy-rebuild #deploy-rebuild-block-tr,
.pulsar-deploy-rebuild #deploy-rebuild-block-bl,
.pulsar-deploy-rebuild #deploy-rebuild-block-br {
stroke: var(--pulsar-accent, currentColor);
opacity: 1;
}
}