<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800" role="img" aria-labelledby="composestack-title composestack-desc">
  <title id="composestack-title">Connected Docker Compose application stack</title>
  <desc id="composestack-desc">A Compose specification connects web, worker, database and volume services on a private network.</desc>
  <defs>
      <linearGradient id="panel" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#24433e"/><stop offset="1" stop-color="#101f25"/></linearGradient>
      <linearGradient id="composestack-beam" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#4df7ba" stop-opacity="0"/><stop offset=".5" stop-color="#4df7ba"/><stop offset="1" stop-color="#4df7ba" stop-opacity="0"/></linearGradient>
      <radialGradient id="composestack-core"><stop stop-color="#4df7ba" stop-opacity=".38"/><stop offset="1" stop-color="#4df7ba" stop-opacity="0"/></radialGradient>
      <filter id="composestack-shadow" x="-30%" y="-30%" width="160%" height="180%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#02090b" flood-opacity=".55"/></filter>
      <filter id="composestack-glow" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    </defs><style>
          .flow{stroke-dasharray:13 18;animation:composestack-flow 8s linear infinite}
          .pulse{animation:composestack-pulse 3.6s ease-in-out infinite}
          .float{animation:composestack-float 6s ease-in-out infinite}
          .scan{animation:composestack-scan 5s ease-in-out infinite}
          @keyframes composestack-flow{to{stroke-dashoffset:-186}}
          @keyframes composestack-pulse{50%{opacity:.3}}
          @keyframes composestack-float{50%{transform:translateY(-8px)}}
          @keyframes composestack-scan{0%,100%{transform:translateX(-34px);opacity:.2}50%{transform:translateX(72px);opacity:.95}}
          @media(prefers-reduced-motion:reduce){*{animation:none!important}}
        </style>
  <ellipse cx="500" cy="742" rx="410" ry="26" fill="#031012" opacity=".5"/>
  <ellipse cx="500" cy="732" rx="350" ry="15" fill="#4df7ba" opacity=".08"/>
  <g filter="url(#compose-shadow)"><rect x="56" y="164" width="290" height="470" rx="34" fill="url(#panel)" stroke="#54776e" stroke-width="3"/></g><text x="100" y="219" fill="#c8eadf" font-size="22" font-weight="900" text-anchor="start" font-family="Inter,Arial,sans-serif">COMPOSE SPEC</text><rect x="96" y="258" width="210" height="318" rx="22" fill="#0d1c21" stroke="#3d6259" stroke-width="3"/><text x="124" y="306" fill="#4df7ba" font-size="18" font-weight="800" text-anchor="start" font-family="Inter,Arial,sans-serif">services:</text><text x="145" y="350" fill="#c8eadf" font-size="18" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">web</text><text x="145" y="391" fill="#c8eadf" font-size="18" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">worker</text><text x="145" y="432" fill="#c8eadf" font-size="18" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">database</text><text x="124" y="492" fill="#a88cff" font-size="18" font-weight="800" text-anchor="start" font-family="Inter,Arial,sans-serif">volumes:</text><text x="145" y="533" fill="#8db0a6" font-size="18" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">app-data</text><path d="M346 397h104" fill="none" stroke="#4df7ba" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" class="flow"/><circle cx="590" cy="397" r="142" fill="url(#compose-core)"/><circle cx="590" cy="397" r="102" fill="#102327" stroke="#4df7ba" stroke-width="4"/><text x="590" y="389" fill="#4df7ba" font-size="18" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">PRIVATE</text><text x="590" y="419" fill="#c8eadf" font-size="18" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">NETWORK</text><path d="M590 295v-54M680 344l63-48M680 450l63 48M590 499v72" fill="none" stroke="#4df7ba" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" class="flow"/><rect x="498" y="106" width="184" height="119" rx="23" fill="#102227" stroke="#3f655c" stroke-width="3" class="float"/><text x="590" y="155" fill="#c8eadf" font-size="20" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">WEB</text><circle cx="590" cy="187" r="8" fill="#4df7ba" class="pulse"/><rect x="742" y="235" width="200" height="134" rx="23" fill="#102227" stroke="#3f655c" stroke-width="3" class="float"/><text x="842" y="289" fill="#c8eadf" font-size="20" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">WORKER</text><circle cx="842" cy="329" r="8" fill="#4df7ba" class="pulse"/><rect x="742" y="431" width="200" height="134" rx="23" fill="#102227" stroke="#3f655c" stroke-width="3" class="float"/><text x="842" y="485" fill="#c8eadf" font-size="19" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">DATABASE</text><circle cx="842" cy="525" r="8" fill="#a88cff" class="pulse"/><rect x="498" y="588" width="184" height="112" rx="23" fill="#102227" stroke="#3f655c" stroke-width="3" class="float"/><text x="590" y="635" fill="#c8eadf" font-size="19" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">VOLUME</text><rect x="535" y="659" width="110" height="14" rx="7" fill="#a88cff" opacity=".8"/>
</svg>