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

  <!-- Funnel -->
  <g transform="translate(120, 60)">
    <path d="M 20 0 L 140 0 L 120 60 L 40 60 Z" fill="#3b82f6" opacity="0.3"/>
    <text x="80" y="35" text-anchor="middle" font-family="system-ui" font-size="14" fill="#1f2937" font-weight="600">1,000</text>
    <text x="80" y="50" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">Visitors</text>

    <path d="M 40 60 L 120 60 L 105 110 L 55 110 Z" fill="#3b82f6" opacity="0.5"/>
    <text x="80" y="85" text-anchor="middle" font-family="system-ui" font-size="14" fill="#1f2937" font-weight="600">300</text>
    <text x="80" y="100" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">Engaged</text>

    <path d="M 55 110 L 105 110 L 95 150 L 65 150 Z" fill="#3b82f6" opacity="0.7"/>
    <text x="80" y="130" text-anchor="middle" font-family="system-ui" font-size="14" fill="#1f2937" font-weight="600">100</text>
    <text x="80" y="145" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">Added to Cart</text>

    <rect x="65" y="150" width="30" height="30" fill="#10b981"/>
    <text x="80" y="170" text-anchor="middle" font-family="system-ui" font-size="14" fill="white" font-weight="bold">30</text>
    <text x="80" y="197" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">Conversions</text>
  </g>

  <!-- Conversion rate badge -->
  <g transform="translate(100, 240)">
    <rect x="0" y="0" width="200" height="80" rx="12" fill="#10b981"/>
    <text x="100" y="30" text-anchor="middle" font-family="system-ui" font-size="14" fill="white">Conversion Rate</text>
    <text x="100" y="60" text-anchor="middle" font-family="system-ui" font-size="32" fill="white" font-weight="bold">3.0%</text>
  </g>

  <!-- Metric boxes -->
  <g transform="translate(60, 340)">
    <rect x="0" y="0" width="90" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="45" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Revenue</text>
    <text x="45" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#10b981" font-weight="600">$3,000</text>
  </g>

  <g transform="translate(165, 340)">
    <rect x="0" y="0" width="90" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="45" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">AOV</text>
    <text x="45" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#3b82f6" font-weight="600">$100</text>
  </g>

  <g transform="translate(270, 340)">
    <rect x="0" y="0" width="70" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="35" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Drop-off</text>
    <text x="35" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#ef4444" font-weight="600">70%</text>
  </g>

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