distributed.svg•4.37 kB
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="240" aria-labelledby="title desc"><title id="title">Distributed Computing</title><desc id="desc">Network nodes with connecting lines and data flow.</desc><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="0"><stop offset="0%" stop-color="#0ea5e9"/><stop offset="100%" stop-color="#22d3ee"/></linearGradient><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="#0ea5e922"/></pattern></defs><style>@keyframes drift { from { transform: translateX(0) } to { transform: translateX(-200px) } }
@keyframes pulse { 0%,100% { opacity:.8 } 50% { opacity:1 } }
@keyframes sweep { 0% { transform: translateX(-1200px) } 100% { transform: translateX(1200px) } }
@keyframes rotate { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes orbit { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes shimmer { 0%,100% { opacity: 0.3 } 50% { opacity: 0.8 } }
@keyframes draw { from { stroke-dasharray: 0,800 } to { stroke-dasharray: 800,0 } }
@keyframes march { from { stroke-dashoffset: 0 } to { stroke-dashoffset: 12 } }
/* reduce motion */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important }
}
.bg { fill: url(#dots) }
.accent { fill: url(#g) }
.stroke { stroke: url(#g); stroke-width: 2; fill: none; opacity: .7 }
.drift { animation: drift 60s linear infinite }
.pulse { animation: pulse 4s ease-in-out infinite }
.sweep { animation: sweep 8s linear infinite }
.rotate { animation: rotate 20s linear infinite }
.orbit { animation: orbit 6s linear infinite }
.shimmer { animation: shimmer 3s ease-in-out infinite }
.draw { animation: draw 3s ease-in-out forwards }
.march { animation: march 1s linear infinite }
text.title { font-size: 42px; font-weight: 700; fill: #0b1220; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
text.sub { font-size: 18px; fill: #0b122099; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }</style><rect width="1200" height="240" class="bg"/><g transform="translate(900,80)"><circle r="12" class="accent pulse" style="animation-delay:0s"/><text y="4" fill="#0b1220" font-size="10" font-weight="bold" text-anchor="middle">1</text><circle cx="100" cy="20" r="12" class="accent pulse" style="animation-delay:0.5s"/><text x="100" y="24" fill="#0b1220" font-size="10" font-weight="bold" text-anchor="middle">2</text><circle cx="200" r="12" class="accent pulse" style="animation-delay:1s"/><text x="200" y="4" fill="#0b1220" font-size="10" font-weight="bold" text-anchor="middle">3</text><circle cx="150" cy="60" r="12" class="accent pulse" style="animation-delay:1.5s"/><text x="150" y="64" fill="#0b1220" font-size="10" font-weight="bold" text-anchor="middle">4</text><circle cx="50" cy="60" r="12" class="accent pulse" style="animation-delay:2s"/><text x="50" y="64" fill="#0b1220" font-size="10" font-weight="bold" text-anchor="middle">5</text><line x2="50" y1="100" y2="20" stroke-dasharray="4 4" class="stroke"><animate attributeName="stroke-dashoffset" dur="2s" from="0" repeatCount="indefinite" to="8"/></line><line x1="100" x2="100" y1="20" y2="36.82941969615793" stroke-dasharray="4 4" class="stroke"><animate attributeName="stroke-dashoffset" dur="2s" from="0" repeatCount="indefinite" to="8"/></line><line x1="200" x2="150" y2="38.185948536513635" stroke-dasharray="4 4" class="stroke"><animate attributeName="stroke-dashoffset" dur="2s" from="0" repeatCount="indefinite" to="8"/></line><line x1="150" x2="200" y1="60" y2="22.822400161197343" stroke-dasharray="4 4" class="stroke"><animate attributeName="stroke-dashoffset" dur="2s" from="0" repeatCount="indefinite" to="8"/></line><line x1="50" y1="60" stroke-dasharray="4 4" class="stroke"><animate attributeName="stroke-dashoffset" dur="2s" from="0" repeatCount="indefinite" to="8"/></line></g><g transform="translate(40,150)"><text class="title">Distributed Computing</text><text y="28" class="sub">Jobs • Clusters • Collaboration</text></g></svg>
