<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="400" fill="#f3f4f6"/>
  
  <!-- Calculator -->
  <g transform="translate(50, 60)">
    <rect x="0" y="0" width="140" height="200" rx="12" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <rect x="10" y="10" width="120" height="40" rx="6" fill="#1f2937"/>
    <text x="70" y="35" text-anchor="middle" font-family="monospace" font-size="18" fill="#10b981" font-weight="600">$1,250</text>
    
    <rect x="15" y="60" width="30" height="25" rx="4" fill="#3b82f6"/>
    <rect x="50" y="60" width="30" height="25" rx="4" fill="#3b82f6"/>
    <rect x="85" y="60" width="30" height="25" rx="4" fill="#3b82f6"/>
    <rect x="15" y="90" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="50" y="90" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="85" y="90" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="15" y="120" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="50" y="120" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="85" y="120" width="30" height="25" rx="4" fill="#e5e7eb"/>
    <rect x="15" y="150" width="100" height="35" rx="4" fill="#10b981"/>
    <text x="65" y="172" text-anchor="middle" font-family="system-ui" font-size="12" fill="white" font-weight="600">=</text>
  </g>
  
  <!-- Money stack -->
  <g transform="translate(220, 70)">
    <rect x="0" y="40" width="100" height="8" rx="2" fill="#10b981"/>
    <rect x="0" y="32" width="100" height="8" rx="2" fill="#10b981"/>
    <rect x="0" y="24" width="100" height="8" rx="2" fill="#10b981"/>
    <rect x="0" y="16" width="100" height="8" rx="2" fill="#059669"/>
    <rect x="0" y="8" width="100" height="8" rx="2" fill="#059669"/>
    <rect x="0" y="0" width="100" height="8" rx="2" fill="#059669"/>
    
    <text x="50" y="70" text-anchor="middle" font-family="system-ui" font-size="14" fill="#059669" font-weight="600">Monthly</text>
  </g>
  
  <!-- Growth chart -->
  <g transform="translate(50, 290)">
    <line x1="0" y1="60" x2="300" y2="60" stroke="#9ca3af" stroke-width="2"/>
    <line x1="0" y1="0" x2="0" y2="60" stroke="#9ca3af" stroke-width="2"/>
    
    <polyline points="0,60 50,50 100,45 150,35 200,25 250,15 300,5" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    
    <circle cx="50" cy="50" r="4" fill="#10b981"/>
    <circle cx="100" cy="45" r="4" fill="#10b981"/>
    <circle cx="150" cy="35" r="4" fill="#10b981"/>
    <circle cx="200" cy="25" r="4" fill="#10b981"/>
    <circle cx="250" cy="15" r="4" fill="#10b981"/>
    <circle cx="300" cy="5" r="4" fill="#10b981"/>
    
    <text x="0" y="80" text-anchor="start" font-family="system-ui" font-size="10" fill="#6b7280">0</text>
    <text x="300" y="80" text-anchor="end" font-family="system-ui" font-size="10" fill="#6b7280">Sales</text>
  </g>
  
  <!-- Percentage badge -->
  <g transform="translate(220, 180)">
    <circle cx="50" cy="30" r="35" fill="#3b82f6" stroke="#1e40af" stroke-width="3"/>
    <text x="50" y="40" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">10%</text>
  </g>
  
  <text x="200" y="385" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="600" fill="#1f2937">Commission Calculator</text>
</svg>
