Xbox Controller SVG Art

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Gradient definitions -->
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#333" />
      <stop offset="100%" stop-color="#444" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#555" />
      <stop offset="100%" stop-color="#666" />
    </linearGradient>
  </defs>
  
  <!-- Body of the controller -->
  <rect x="50" y="50" width="300" height="100" rx="10" fill="url(#grad1)" />
  
  <!-- Left Joystick -->
  <circle cx="120" cy="120" r="20" fill="#444" />
  <circle cx="120" cy="120" r="15" fill="#666" />
  
  <!-- Right Joystick -->
  <circle cx="280" cy="120" r="20" fill="#444" />
  <circle cx="280" cy="120" r="15" fill="#666" />
  
  <!-- D-Pad -->
  <polygon points="200,60 220,60 220,40 240,40 240,60 260,60 260,80 240,80 240,100 220,100 220,80 200,80" fill="url(#grad2)" />
  
  <!-- Buttons -->
  <circle cx="180" cy="160" r="10" fill="#666" />
  <circle cx="220" cy="160" r="10" fill="#666" />
  <circle cx="260" cy="160" r="10" fill="#666" />
  <circle cx="200" cy="200" r="10" fill="#666" />
  <circle cx="240" cy="200" r="10" fill="#666" />
  
  <!-- Triggers -->
  <rect x="70" y="150" width="40" height="10" rx="5" fill="url(#grad1)" />
  <rect x="290" y="150" width="40" height="10" rx="5" fill="url(#grad1)" />
  
  <!-- Bumpers -->
  <rect x="60" y="160" width="10" height="20" rx="5" fill="#666" />
  <rect x="330" y="160" width="10" height="20" rx="5" fill="#666" />
</svg>