<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800" role="img" aria-labelledby="appmetrics-title appmetrics-desc">
  <title id="appmetrics-title">Application metrics and alert evidence</title>
  <desc id="appmetrics-desc">A detailed observability dashboard correlates CPU, memory, restarts and alert evidence.</desc>
  <defs>
      <linearGradient id="panel" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#23433e"/><stop offset="1" stop-color="#101f25"/></linearGradient>
      <linearGradient id="database" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#284744"/><stop offset="1" stop-color="#122429"/></linearGradient>
      <linearGradient id="appmetrics-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>
      <filter id="appmetrics-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="appmetrics-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:appmetrics-flow 8s linear infinite}
          .pulse{animation:appmetrics-pulse 3.8s ease-in-out infinite}
          .scan{animation:appmetrics-scan 5.5s ease-in-out infinite}
          .float{animation:appmetrics-float 6s ease-in-out infinite}
          @keyframes appmetrics-flow{to{stroke-dashoffset:-186}}
          @keyframes appmetrics-pulse{50%{opacity:.28}}
          @keyframes appmetrics-scan{0%,100%{transform:translateY(-12px);opacity:.25}50%{transform:translateY(76px);opacity:.9}}
          @keyframes appmetrics-float{50%{transform:translateY(-8px)}}
          @media(prefers-reduced-motion:reduce){*{animation:none!important}}
        </style>
  <ellipse cx="500" cy="744" rx="418" ry="28" fill="#031012" opacity=".48"/>
  <ellipse cx="500" cy="733" rx="360" ry="16" fill="#4df7ba" opacity=".08"/>
  <g filter="url(#metrics-shadow)"><rect x="72" y="145" width="650" height="500" rx="34" fill="url(#panel)" stroke="#587b73" stroke-width="3"/><rect x="750" y="185" width="190" height="205" rx="28" fill="url(#panel)" stroke="#587b73" stroke-width="3"/><rect x="750" y="420" width="190" height="205" rx="28" fill="url(#panel)" stroke="#587b73" stroke-width="3"/></g><text x="118" y="203" fill="#bce9da" font-size="24" font-weight="800" text-anchor="start" font-family="Inter,Arial,sans-serif">LIVE APPLICATION METRICS</text><text x="118" y="238" fill="#8fb7ac" font-size="17" font-weight="500" text-anchor="start" font-family="Inter,Arial,sans-serif">Correlate measurements with restarts and alert evidence</text><path d="M145 294h423" stroke="#2c4b45" stroke-width="2"/><path d="M145 350h423" stroke="#2c4b45" stroke-width="2"/><path d="M145 406h423" stroke="#2c4b45" stroke-width="2"/><path d="M145 462h423" stroke="#2c4b45" stroke-width="2"/><path d="M145 448l60-31 58 19 61-104 60 55 62-82 62 36 58-65" fill="none" stroke="#4df7ba" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M490 270v222" stroke="#aa8cff" stroke-width="3" stroke-dasharray="7 10" class="scan"/><circle cx="508" cy="341" r="10" fill="#4df7ba" filter="url(#metrics-glow)" class="pulse"/><text x="145" y="521" fill="#789b92" font-size="16" font-weight="600" text-anchor="start" font-family="Inter,Arial,sans-serif">12:00</text><text x="520" y="521" fill="#4df7ba" font-size="16" font-weight="800" text-anchor="start" font-family="Inter,Arial,sans-serif">NOW</text><rect x="118" y="558" width="560" height="50" rx="16" fill="#102226"/><circle cx="147" cy="583" r="8" fill="#4df7ba" class="pulse"/><text x="171" y="590" fill="#bce9da" font-size="17" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">CPU 38%</text><circle cx="300" cy="583" r="8" fill="#aa8cff" class="pulse"/><text x="324" y="590" fill="#bce9da" font-size="17" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">MEM 62%</text><circle cx="465" cy="583" r="8" fill="#ffc86b" class="pulse"/><text x="489" y="590" fill="#bce9da" font-size="17" font-weight="700" text-anchor="start" font-family="Inter,Arial,sans-serif">RESTARTS 1</text><text x="845" y="231" fill="#bce9da" font-size="18" font-weight="800" text-anchor="middle" font-family="Inter,Arial,sans-serif">MEMORY</text><circle cx="845" cy="304" r="48" fill="none" stroke="#29453f" stroke-width="15"/><path d="M845 256a48 48 0 1 1-45 65" fill="none" stroke="#aa8cff" stroke-width="15" stroke-linecap="round"/><text x="845" y="312" fill="#aa8cff" font-size="21" font-weight="800" text-anchor="middle" font-family="Inter,Arial,sans-serif">62%</text><text x="845" y="469" fill="#bce9da" font-size="17" font-weight="800" text-anchor="middle" font-family="Inter,Arial,sans-serif">ALERT EVIDENCE</text><path d="M810 548l35-61 35 61z" fill="#332944" stroke="#aa8cff" stroke-width="4"/><text x="845" y="535" fill="#aa8cff" font-size="28" font-weight="900" text-anchor="middle" font-family="Inter,Arial,sans-serif">!</text><text x="845" y="586" fill="#cbbdff" font-size="17" font-weight="800" text-anchor="middle" font-family="Inter,Arial,sans-serif">REVIEW</text>
</svg>