distributed-collaboration-hero.svg•3.29 kB
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 220" role="img" aria-labelledby="title desc">
<title id="title">Distributed Collaboration Overview</title>
<desc id="desc">Animated nodes exchanging signals to depict collaboration across physics MCP agents.</desc>
<style>
:root { color-scheme: light dark; }
svg {
font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
}
.grid line {
stroke: rgba(226, 232, 240, 0.12);
stroke-width: 1;
}
.node {
fill: #38bdf8;
stroke: rgba(14, 165, 233, 0.6);
stroke-width: 2;
filter: url(#glow);
}
.node-secondary {
fill: #f97316;
stroke: rgba(249, 115, 22, 0.6);
}
.link {
stroke-width: 3;
stroke-linecap: round;
stroke: url(#pulse);
opacity: 0.6;
animation: dash 6s linear infinite;
animation-play-state: paused;
}
.signal {
fill: none;
stroke-width: 2;
stroke: rgba(96, 165, 250, 0.4);
stroke-dasharray: 6 10;
animation: ripple 5s ease-in-out infinite;
animation-play-state: paused;
}
text {
fill: #e2e8f0;
}
svg.is-playing .link,
svg.is-playing .signal {
animation-play-state: running;
}
@keyframes dash {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -120; }
}
@keyframes ripple {
0% { stroke-dashoffset: 0; opacity: 0; }
20% { opacity: 0.8; }
60% { opacity: 0.4; }
100% { stroke-dashoffset: -120; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.link,
.signal {
animation: none !important;
}
}
</style>
<defs>
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<linearGradient id="pulse" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#38bdf8" />
<stop offset="50%" stop-color="#a855f7" />
<stop offset="100%" stop-color="#38bdf8" />
</linearGradient>
</defs>
<g class="grid">
<line x1="80" y1="30" x2="80" y2="190" />
<line x1="280" y1="30" x2="280" y2="190" />
<line x1="480" y1="30" x2="480" y2="190" />
<line x1="680" y1="30" x2="680" y2="190" />
<line x1="880" y1="30" x2="880" y2="190" />
<line x1="60" y1="80" x2="900" y2="80" />
<line x1="60" y1="150" x2="900" y2="150" />
</g>
<text x="60" y="70" font-size="40" font-weight="700">Distributed Collaboration</text>
<text x="62" y="104" font-size="18" fill="#94a3b8">Agent mesh coordinating shared experiments</text>
<g>
<circle class="node" cx="220" cy="150" r="16" />
<circle class="node" cx="420" cy="110" r="18" />
<circle class="node-secondary" cx="620" cy="160" r="14" />
<circle class="node" cx="780" cy="100" r="20" />
<path class="link" d="M220 150 C 320 60, 520 60, 620 160" />
<path class="link" d="M420 110 C 480 170, 700 200, 780 100" />
<path class="link" d="M220 150 C 320 150, 520 130, 780 100" />
<path class="signal" d="M 420 110 C 520 40, 760 40, 780 100" />
</g>
</svg>
