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

  <!-- URL Bar -->
  <g transform="translate(40, 50)">
    <rect x="0" y="0" width="320" height="50" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <circle cx="15" cy="25" r="5" fill="#ef4444"/>
    <circle cx="30" cy="25" r="5" fill="#f59e0b"/>
    <circle cx="45" cy="25" r="5" fill="#10b981"/>
    <text x="65" y="30" font-family="monospace" font-size="12" fill="#6b7280">https://example.com?utm_</text>
  </g>

  <!-- UTM Parameters Display -->
  <g transform="translate(40, 120)">
    <!-- Source -->
    <rect x="0" y="0" width="140" height="40" rx="6" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"/>
    <text x="10" y="16" font-family="system-ui" font-size="10" fill="#1e40af" font-weight="600">utm_source</text>
    <text x="10" y="30" font-family="system-ui" font-size="12" fill="#1e3a8a" font-weight="500">facebook</text>

    <!-- Medium -->
    <rect x="0" y="50" width="140" height="40" rx="6" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="2"/>
    <text x="10" y="66" font-family="system-ui" font-size="10" fill="#5b21b6" font-weight="600">utm_medium</text>
    <text x="10" y="80" font-family="system-ui" font-size="12" fill="#4c1d95" font-weight="500">social</text>

    <!-- Campaign -->
    <rect x="0" y="100" width="140" height="40" rx="6" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
    <text x="10" y="116" font-family="system-ui" font-size="10" fill="#047857" font-weight="600">utm_campaign</text>
    <text x="10" y="130" font-family="system-ui" font-size="12" fill="#065f46" font-weight="500">summer-sale</text>
  </g>

  <!-- Arrow -->
  <g transform="translate(190, 180)">
    <line x1="0" y1="0" x2="40" y2="0" stroke="#3b82f6" stroke-width="3" marker-end="url(#arrowhead)"/>
  </g>

  <!-- Arrow marker -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#3b82f6"/>
    </marker>
  </defs>

  <!-- Target/Link Icon -->
  <g transform="translate(240, 130)">
    <circle cx="40" cy="40" r="40" fill="#3b82f6" opacity="0.1"/>
    <circle cx="40" cy="40" r="30" fill="#3b82f6" opacity="0.2"/>
    <circle cx="40" cy="40" r="20" fill="#3b82f6"/>
    <path d="M 30 40 L 50 40 M 40 30 L 40 50" stroke="white" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Analytics Chart -->
  <g transform="translate(50, 240)">
    <rect x="0" y="0" width="300" height="120" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <!-- Chart Title -->
    <text x="10" y="20" font-family="system-ui" font-size="12" fill="#1f2937" font-weight="600">Campaign Performance</text>

    <!-- Bars -->
    <rect x="20" y="40" width="40" height="60" rx="4" fill="#3b82f6"/>
    <text x="40" y="110" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">FB</text>

    <rect x="70" y="55" width="40" height="45" rx="4" fill="#8b5cf6"/>
    <text x="90" y="110" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">YT</text>

    <rect x="120" y="65" width="40" height="35" rx="4" fill="#10b981"/>
    <text x="140" y="110" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Email</text>

    <rect x="170" y="75" width="40" height="25" rx="4" fill="#f59e0b"/>
    <text x="190" y="110" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Blog</text>

    <!-- Growth arrow -->
    <polyline points="230,90 250,70 270,75 285,55" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="230" cy="90" r="2" fill="#10b981"/>
    <circle cx="250" cy="70" r="2" fill="#10b981"/>
    <circle cx="270" cy="75" r="2" fill="#10b981"/>
    <circle cx="285" cy="55" r="2" fill="#10b981"/>
  </g>

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