<svg width="720" height="260" viewBox="0 0 720 260" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="api-card" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ECFEFF"/>
      <stop offset="100%" stop-color="#E0F2FE"/>
    </linearGradient>
    <linearGradient id="api-accent" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0EA5E9"/>
      <stop offset="100%" stop-color="#2563EB"/>
    </linearGradient>
    <filter id="api-shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#0F172A" flood-opacity="0.12"/>
    </filter>
  </defs>

  <rect x="24" y="24" width="672" height="212" rx="24" fill="white" stroke="#E5E7EB" filter="url(#api-shadow)"/>

  <!-- Title -->
  <text x="48" y="64" fill="#0F172A" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="600">
    API Request Flow
  </text>
  <text x="48" y="84" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12">
    Client → API gateway → services and data
  </text>

  <!-- Client -->
  <rect x="56" y="110" width="150" height="70" rx="18" fill="url(#api-card)" stroke="#BAE6FD"/>
  <rect x="72" y="124" width="32" height="32" rx="8" fill="#EFF6FF" stroke="#0EA5E9" stroke-width="1.2"/>
  <path d="M78 132H98M78 138H98" stroke="#0EA5E9" stroke-width="1.4" stroke-linecap="round"/>
  <text x="142" y="138" text-anchor="middle" fill="#1F2937" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600">
    Client
  </text>
  <text x="142" y="158" text-anchor="middle" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Browser · Mobile · Service
  </text>

  <!-- Arrow 1 -->
  <line x1="206" y1="145" x2="268" y2="145" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
  <polygon points="268,145 260,140 260,150" fill="#9CA3AF"/>

  <!-- API Gateway -->
  <rect x="268" y="100" width="184" height="90" rx="20" fill="url(#api-card)" stroke="#BAE6FD"/>
  <text x="360" y="128" text-anchor="middle" fill="#1F2937" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600">
    API Gateway
  </text>
  <text x="360" y="146" text-anchor="middle" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Routing · Auth · Rate limiting
  </text>
  <rect x="288" y="152" width="144" height="24" rx="12" fill="rgba(14,165,233,0.06)" stroke="#BAE6FD"/>
  <text x="360" y="168" text-anchor="middle" fill="#0EA5E9" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Observability · Logging · Metrics
  </text>

  <!-- Arrow 2 -->
  <line x1="452" y1="145" x2="514" y2="145" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
  <polygon points="514,145 506,140 506,150" fill="#9CA3AF"/>

  <!-- Services -->
  <rect x="514" y="96" width="152" height="96" rx="20" fill="url(#api-card)" stroke="#BAE6FD"/>
  <rect x="530" y="112" width="56" height="20" rx="6" fill="#EFF6FF" stroke="#0EA5E9" stroke-width="1.2"/>
  <text x="558" y="126" text-anchor="middle" fill="#0F172A" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="10">
    Service A
  </text>
  <rect x="530" y="138" width="56" height="20" rx="6" fill="#EFF6FF" stroke="#0EA5E9" stroke-width="1.2"/>
  <text x="558" y="152" text-anchor="middle" fill="#0F172A" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="10">
    Service B
  </text>
  <rect x="596" y="125" width="56" height="20" rx="6" fill="#EFF6FF" stroke="#0EA5E9" stroke-width="1.2"/>
  <text x="624" y="139" text-anchor="middle" fill="#0F172A" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="10">
    DB / Cache
  </text>

  <!-- Legend -->
  <rect x="56" y="204" width="270" height="26" rx="13" fill="rgba(15,23,42,0.02)"/>
  <circle cx="76" cy="217" r="4" fill="url(#api-accent)"/>
  <text x="88" y="220" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Visualize request path and where to add safeguards
  </text>
</svg>


