<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Customer icons -->
  <g transform="translate(60, 60)">
    <!-- Staying customers (green) -->
    <circle cx="30" cy="30" r="18" fill="#10b981"/>
    <circle cx="80" cy="30" r="18" fill="#10b981"/>
    <circle cx="130" cy="30" r="18" fill="#10b981"/>
    <circle cx="180" cy="30" r="18" fill="#10b981"/>
    <circle cx="230" cy="30" r="18" fill="#10b981"/>
    <circle cx="280" cy="30" r="18" fill="#10b981"/>

    <circle cx="30" cy="75" r="18" fill="#10b981"/>
    <circle cx="80" cy="75" r="18" fill="#10b981"/>

    <!-- Churned customers (red) -->
    <circle cx="130" cy="75" r="18" fill="#ef4444"/>
    <line x1="120" y1="65" x2="140" y2="85" stroke="white" stroke-width="3" stroke-linecap="round"/>
    <line x1="140" y1="65" x2="120" y2="85" stroke="white" stroke-width="3" stroke-linecap="round"/>

    <circle cx="180" cy="75" r="18" fill="#ef4444"/>
    <line x1="170" y1="65" x2="190" y2="85" stroke="white" stroke-width="3" stroke-linecap="round"/>
    <line x1="190" y1="65" x2="170" y2="85" stroke="white" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Metrics boxes -->
  <g transform="translate(60, 160)">
    <rect x="0" y="0" width="280" height="120" rx="10" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <g transform="translate(20, 25)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Start Customers</text>
      <text x="0" y="24" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">1,000</text>
    </g>

    <g transform="translate(160, 25)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Lost</text>
      <text x="0" y="24" font-family="system-ui" font-size="18" fill="#ef4444" font-weight="bold">50</text>
    </g>

    <g transform="translate(20, 70)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Retention Rate</text>
      <text x="0" y="24" font-family="system-ui" font-size="18" fill="#10b981" font-weight="bold">95%</text>
    </g>

    <g transform="translate(160, 70)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Remaining</text>
      <text x="0" y="24" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">950</text>
    </g>
  </g>

  <!-- Churn rate badge -->
  <g transform="translate(110, 300)">
    <rect x="0" y="0" width="180" height="70" rx="12" fill="#ef4444"/>
    <text x="90" y="28" text-anchor="middle" font-family="system-ui" font-size="14" fill="white">Churn Rate</text>
    <text x="90" y="54" text-anchor="middle" font-family="system-ui" font-size="32" fill="white" font-weight="bold">5.0%</text>
  </g>

  <text x="200" y="390" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="600" fill="#1f2937">Churn Rate Calculator</text>
</svg>
