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

  <!-- Large percentage symbol -->
  <g transform="translate(200, 200)">
    <!-- Top circle of % -->
    <circle cx="-60" cy="-60" r="25" fill="#3b82f6" opacity="0.8"/>
    <circle cx="-60" cy="-60" r="10" fill="white"/>

    <!-- Diagonal line -->
    <line x1="-40" y1="-40" x2="40" y2="40" stroke="#1f2937" stroke-width="8" stroke-linecap="round"/>

    <!-- Bottom circle of % -->
    <circle cx="60" cy="60" r="25" fill="#3b82f6" opacity="0.8"/>
    <circle cx="60" cy="60" r="10" fill="white"/>
  </g>

  <!-- Calculator display -->
  <g transform="translate(80, 80)">
    <rect x="0" y="0" width="120" height="60" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="110" y="38" text-anchor="end" font-family="system-ui" font-size="24" fill="#3b82f6" font-weight="bold">25%</text>
    <text x="10" y="20" font-family="system-ui" font-size="10" fill="#6b7280">Result</text>
  </g>

  <!-- Formula box -->
  <g transform="translate(220, 80)">
    <rect x="0" y="0" width="100" height="60" rx="8" fill="#f9fafb" stroke="#d1d5db" stroke-width="2"/>
    <text x="50" y="25" text-anchor="middle" font-family="monospace" font-size="11" fill="#1f2937">50 × 50</text>
    <text x="50" y="40" text-anchor="middle" font-family="monospace" font-size="11" fill="#1f2937">────</text>
    <text x="50" y="55" text-anchor="middle" font-family="monospace" font-size="11" fill="#1f2937">100</text>
  </g>

  <!-- Discount tag -->
  <g transform="translate(60, 260)">
    <path d="M 0,0 L 60,0 L 70,20 L 60,40 L 0,40 Z" fill="#10b981" stroke="#059669" stroke-width="2"/>
    <circle cx="15" cy="20" r="4" fill="white"/>
    <text x="30" y="26" text-anchor="middle" font-family="system-ui" font-size="16" fill="white" font-weight="bold">-20%</text>
  </g>

  <!-- Price comparison -->
  <g transform="translate(150, 260)">
    <rect x="0" y="0" width="80" height="40" rx="6" fill="white" stroke="#e5e7eb" stroke-width="2"/>
    <text x="40" y="18" text-anchor="middle" font-family="system-ui" font-size="11" fill="#9ca3af" font-weight="600" text-decoration="line-through">$100</text>
    <text x="40" y="33" text-anchor="middle" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">$80</text>
  </g>

  <!-- Tip calculator -->
  <g transform="translate(260, 260)">
    <rect x="0" y="0" width="70" height="40" rx="6" fill="#fef3c7" stroke="#fbbf24" stroke-width="2"/>
    <text x="35" y="18" text-anchor="middle" font-family="system-ui" font-size="10" fill="#92400e">Tip 15%</text>
    <text x="35" y="33" text-anchor="middle" font-family="system-ui" font-size="14" fill="#92400e" font-weight="bold">$7.50</text>
  </g>

  <!-- Increase arrow -->
  <g transform="translate(80, 320)">
    <line x1="0" y1="20" x2="0" y2="-10" stroke="#10b981" stroke-width="4" stroke-linecap="round"/>
    <polygon points="0,-15 -6,-5 6,-5" fill="#10b981"/>
    <text x="12" y="0" font-family="system-ui" font-size="14" fill="#10b981" font-weight="bold">+50%</text>
  </g>

  <!-- Decrease arrow -->
  <g transform="translate(150, 320)">
    <line x1="0" y1="0" x2="0" y2="30" stroke="#ef4444" stroke-width="4" stroke-linecap="round"/>
    <polygon points="0,35 -6,25 6,25" fill="#ef4444"/>
    <text x="12" y="25" font-family="system-ui" font-size="14" fill="#ef4444" font-weight="bold">-25%</text>
  </g>

  <!-- Small calculation icons -->
  <g transform="translate(230, 320)">
    <!-- Division -->
    <circle cx="0" cy="0" r="3" fill="#6b7280"/>
    <line x1="-5" y1="10" x2="5" y2="10" stroke="#6b7280" stroke-width="2"/>
    <circle cx="0" cy="20" r="3" fill="#6b7280"/>

    <!-- Multiplication -->
    <line x1="25" y1="5" x2="35" y2="15" stroke="#6b7280" stroke-width="2"/>
    <line x1="35" y1="5" x2="25" y2="15" stroke="#6b7280" stroke-width="2"/>

    <!-- Addition -->
    <line x1="45" y1="10" x2="55" y2="10" stroke="#6b7280" stroke-width="2"/>
    <line x1="50" y1="5" x2="50" y2="15" stroke="#6b7280" stroke-width="2"/>

    <!-- Subtraction -->
    <line x1="65" y1="10" x2="75" y2="10" stroke="#6b7280" stroke-width="2"/>
  </g>

  <!-- Number grid (calculator buttons look) -->
  <g transform="translate(260, 340)">
    <rect x="0" y="0" width="15" height="15" rx="2" fill="#e5e7eb"/>
    <rect x="20" y="0" width="15" height="15" rx="2" fill="#e5e7eb"/>
    <rect x="40" y="0" width="15" height="15" rx="2" fill="#e5e7eb"/>
    <rect x="0" y="20" width="15" height="15" rx="2" fill="#e5e7eb"/>
    <rect x="20" y="20" width="15" height="15" rx="2" fill="#e5e7eb"/>
    <rect x="40" y="20" width="15" height="15" rx="2" fill="#3b82f6"/>
  </g>

  <!-- Small percentage badges -->
  <g transform="translate(30, 180)">
    <circle cx="0" cy="0" r="20" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"/>
    <text x="0" y="6" text-anchor="middle" font-family="system-ui" font-size="12" fill="#3b82f6" font-weight="bold">%</text>
  </g>

  <g transform="translate(350, 180)">
    <circle cx="0" cy="0" r="18" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/>
    <text x="0" y="5" text-anchor="middle" font-family="system-ui" font-size="11" fill="#f59e0b" font-weight="bold">÷</text>
  </g>

  <!-- Decorative dots -->
  <circle cx="50" cy="30" r="4" fill="#93c5fd" opacity="0.5"/>
  <circle cx="350" cy="50" r="5" fill="#a5b4fc" opacity="0.5"/>
  <circle cx="370" cy="300" r="4" fill="#fcd34d" opacity="0.5"/>
  <circle cx="30" cy="370" r="5" fill="#86efac" opacity="0.5"/>

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