<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Marketing performance panel showing an agency's capacity trending upward">
  <defs>
    <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7d87c4" stop-opacity=".38"/>
      <stop offset="1" stop-color="#7d87c4" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#552768"/>
      <stop offset="1" stop-color="#7d87c4"/>
    </linearGradient>
    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#1f2559" flood-opacity="0.16"/>
    </filter>
    <style>
      /* Only the KPI bars animate. */
      .bar { transform-box: fill-box; transform-origin: bottom; animation: grow 3.6s ease-in-out infinite; }
      .b1 { animation-delay: 0s } .b2 { animation-delay: .25s } .b3 { animation-delay: .5s } .b4 { animation-delay: .75s } .b5 { animation-delay: 1s }
      @keyframes grow { 0%,100% { transform: scaleY(.86); } 50% { transform: scaleY(1); } }
      @media (prefers-reduced-motion: reduce) { .bar { animation: none; } }
    </style>
  </defs>

  <rect x="24" y="26" width="552" height="348" rx="26" fill="#ffffff" filter="url(#soft)"/>
  <rect x="24" y="26" width="552" height="348" rx="26" fill="none" stroke="#ececf4"/>

  <circle cx="56" cy="60" r="5" fill="#d25657"/>
  <circle cx="74" cy="60" r="5" fill="#f0b429"/>
  <circle cx="92" cy="60" r="5" fill="#5bbb4b"/>
  <rect x="112" y="53" width="150" height="13" rx="6.5" fill="#eceaf4"/>
  <rect x="470" y="50" width="86" height="20" rx="10" fill="#effaec"/>
  <circle cx="484" cy="60" r="4" fill="#5bbb4b"/>
  <rect x="494" y="55" width="54" height="9" rx="4.5" fill="#bfe3b6"/>

  <g stroke="#f0f0f6" stroke-width="1">
    <line x1="50" y1="138" x2="356" y2="138"/>
    <line x1="50" y1="184" x2="356" y2="184"/>
    <line x1="50" y1="230" x2="356" y2="230"/>
  </g>

  <path d="M50,224 C 92,214 120,208 168,196 C 214,184 246,150 292,140 C 322,133 336,118 350,104 L350,254 L50,254 Z" fill="url(#areaFill)"/>
  <path d="M50,224 C 92,214 120,208 168,196 C 214,184 246,150 292,140 C 322,133 336,118 350,104"
        fill="none" stroke="url(#lineGrad)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
  <g>
    <circle cx="350" cy="104" r="9" fill="#5bbb4b" opacity=".28"/>
    <circle cx="350" cy="104" r="5" fill="#5bbb4b"/>
    <circle cx="350" cy="104" r="2.4" fill="#fff"/>
  </g>

  <g transform="translate(470,168)">
    <circle r="52" fill="none" stroke="#eceaf4" stroke-width="16"/>
    <circle r="52" fill="none" stroke="#552768" stroke-width="16" stroke-linecap="round"
            transform="rotate(-90)" stroke-dasharray="326.7" stroke-dashoffset="49"/>
    <text x="0" y="-2" text-anchor="middle" font-family="'Plus Jakarta Sans',system-ui,sans-serif" font-size="30" font-weight="800" fill="#1f2559">85%</text>
    <text x="0" y="20" text-anchor="middle" font-family="'Plus Jakarta Sans',system-ui,sans-serif" font-size="11.5" font-weight="600" letter-spacing=".04em" fill="#8a8fae">CAPACITY</text>
  </g>

  <g>
    <rect class="bar b1" x="58"  y="300" width="40" height="42" rx="7" fill="#7d87c4"/>
    <rect class="bar b2" x="116" y="286" width="40" height="56" rx="7" fill="#552768"/>
    <rect class="bar b3" x="174" y="296" width="40" height="46" rx="7" fill="#5bbb4b"/>
    <rect class="bar b4" x="232" y="278" width="40" height="64" rx="7" fill="#d25657"/>
    <rect class="bar b5" x="290" y="290" width="40" height="52" rx="7" fill="#7d87c4"/>
  </g>

  <g>
    <g transform="translate(470,278)">
      <circle r="30" fill="#5bbb4b"/>
      <circle r="30" fill="none" stroke="#ffffff" stroke-opacity=".35" stroke-width="2"/>
      <path d="M-11,-1 L-3,7 L11,-7" fill="none" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <rect x="392" y="322" width="156" height="26" rx="13" fill="#f4f4f9"/>
    <text x="470" y="339" text-anchor="middle" font-family="'Plus Jakarta Sans',system-ui,sans-serif" font-size="12.5" font-weight="700" fill="#552768">Ready for more</text>
  </g>
</svg>
