Route Distribution
CSSA single ingress path routes incoming pulses across a tri-split manifold to three designated endpoint brackets in round-robin sequence.
- Tier
- CSS
- Dependencies
- None
- Duration
- 3.6 s, loops
- Categories
- Icons and micro-interactions, Data and progress
- Use cases
- Workflow and approvals, Automation and rules
- Industries
- SaaS and software, Cross-industry
- Style
- Technical · light stroke
- Set
- endpoint
- Tags
- looplineminimalui
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="endpoint-routing-title" class="pulsar pulsar-endpoint-routing" data-pulsar="endpoint-routing" role="img" viewBox="0 0 160 96"><title id="endpoint-routing-title">A route distribution manifold directing data pulses to three endpoints</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-routing-datum" d="M20 24h8m-8 0v8m120-8h-8m8 0v8M20 72h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-routing-grid" stroke-dasharray="2 4" d="M40 28v40m80-40v40"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-routing-ingress" x1="24" x2="56" y1="48" y2="48"></line><circle id="endpoint-routing-ring" cx="60" cy="48" r="4"></circle><path id="endpoint-routing-track-top" d="M64 48c16 0 28-20 56-20"></path><path id="endpoint-routing-track-mid" d="M64 48h56"></path><path id="endpoint-routing-track-bot" d="M64 48c16 0 28 20 56 20"></path><path id="endpoint-routing-bracket-top" d="M120 22h6v12h-6"></path><path id="endpoint-routing-bracket-mid" d="M120 42h6v12h-6"></path><path id="endpoint-routing-bracket-bot" d="M120 62h6v12h-6"></path></g><circle id="endpoint-routing-hub" cx="60" cy="48" r="2" fill="currentColor"></circle><circle id="endpoint-routing-pulse-1" cx="24" cy="48" r="2.5" fill="currentColor"></circle><circle id="endpoint-routing-pulse-2" cx="24" cy="48" r="2.5" fill="currentColor"></circle><circle id="endpoint-routing-pulse-3" cx="24" cy="48" r="2.5" fill="currentColor"></circle></svg>
animation.css
.pulsar-endpoint-routing #endpoint-routing-pulse-1,
.pulsar-endpoint-routing #endpoint-routing-pulse-2,
.pulsar-endpoint-routing #endpoint-routing-pulse-3,
.pulsar-endpoint-routing #endpoint-routing-hub,
.pulsar-endpoint-routing #endpoint-routing-bracket-top,
.pulsar-endpoint-routing #endpoint-routing-bracket-mid,
.pulsar-endpoint-routing #endpoint-routing-bracket-bot {
transform-box: fill-box;
animation-duration: 3600ms;
animation-delay: 0ms;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-1,
.pulsar-endpoint-routing #endpoint-routing-pulse-2,
.pulsar-endpoint-routing #endpoint-routing-pulse-3 {
fill: var(--pulsar-accent, currentColor);
transform-origin: center;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.pulsar-endpoint-routing #endpoint-routing-pulse-1 {
animation-name: endpoint-routing-pt;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-2 {
animation-name: endpoint-routing-pm;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-3 {
animation-name: endpoint-routing-pb;
}
.pulsar-endpoint-routing #endpoint-routing-hub {
fill: var(--pulsar-accent, currentColor);
transform-origin: center;
animation-name: endpoint-routing-h;
animation-timing-function: ease-in-out;
}
.pulsar-endpoint-routing #endpoint-routing-bracket-top {
stroke: currentColor;
animation-name: endpoint-routing-bt;
}
.pulsar-endpoint-routing #endpoint-routing-bracket-mid {
stroke: currentColor;
animation-name: endpoint-routing-bm;
}
.pulsar-endpoint-routing #endpoint-routing-bracket-bot {
stroke: currentColor;
animation-name: endpoint-routing-bb;
}
@keyframes endpoint-routing-pt {
0% {
transform: translate(0, 0);
opacity: 0;
}
4% {
transform: translate(0, 0);
opacity: 1;
}
14% {
transform: translate(36px, 0);
opacity: 1;
}
28% {
transform: translate(96px, -20px);
opacity: 1;
}
33%,
100% {
transform: translate(96px, -20px) scale(0.2);
opacity: 0;
}
}
@keyframes endpoint-routing-pm {
0%,
33% {
transform: translate(0, 0);
opacity: 0;
}
37% {
transform: translate(0, 0);
opacity: 1;
}
47% {
transform: translate(36px, 0);
opacity: 1;
}
61% {
transform: translate(96px, 0);
opacity: 1;
}
66%,
100% {
transform: translate(96px, 0) scale(0.2);
opacity: 0;
}
}
@keyframes endpoint-routing-pb {
0%,
66% {
transform: translate(0, 0);
opacity: 0;
}
70% {
transform: translate(0, 0);
opacity: 1;
}
80% {
transform: translate(36px, 0);
opacity: 1;
}
94% {
transform: translate(96px, 20px);
opacity: 1;
}
99%,
100% {
transform: translate(96px, 20px) scale(0.2);
opacity: 0;
}
}
@keyframes endpoint-routing-h {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
14%,
47%,
80% {
transform: scale(1.4);
opacity: 1;
}
22%,
55%,
88% {
transform: scale(1);
opacity: 0.5;
}
}
@keyframes endpoint-routing-bt {
0%,
25%,
38%,
100% {
stroke: currentColor;
}
28%,
34% {
stroke: var(--pulsar-accent, currentColor);
}
}
@keyframes endpoint-routing-bm {
0%,
58%,
71%,
100% {
stroke: currentColor;
}
61%,
67% {
stroke: var(--pulsar-accent, currentColor);
}
}
@keyframes endpoint-routing-bb {
0%,
91%,
100% {
stroke: currentColor;
}
94%,
99% {
stroke: var(--pulsar-accent, currentColor);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-endpoint-routing * {
animation: none !important;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-1 {
transform: translate(96px, -20px);
opacity: 0.8;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-2 {
transform: translate(96px, 0);
opacity: 0.8;
}
.pulsar-endpoint-routing #endpoint-routing-pulse-3 {
transform: translate(96px, 20px);
opacity: 0.8;
}
}