<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 792 400" role="img" aria-labelledby="event-vs-user-property-title event-vs-user-property-desc" font-family="Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif">
  <title id="event-vs-user-property-title">Event property versus user property</title>
  <desc id="event-vs-user-property-desc">An event property describes a single event occurrence, while a user property applies to later events until its value changes.</desc>

  <!-- Left panel: Event property -->
  <g>
    <rect x="0" y="0" width="336" height="320" rx="12" ry="12" fill="#f8f9fb" stroke="#6f7480" stroke-width="1" stroke-dasharray="4 4"/>
    <text x="20" y="36" font-size="14" font-weight="600" fill="#13294b">Event property</text>

    <!-- The one event the property is attached to -->
    <rect x="20" y="56" width="296" height="64" rx="8" ry="8" fill="#ffffff" stroke="#6f7480" stroke-width="1"/>
    <text x="36" y="82" font-size="14" font-weight="500" fill="#13294b">Purchase</text>
    <text x="36" y="102" font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace" font-size="12" font-weight="400" fill="#1e2024">plan_at_purchase: pro</text>

    <text x="20" y="276" font-size="11" font-weight="400" fill="#13294b">Belongs to this one event.</text>
    <text x="20" y="294" font-size="11" font-weight="400" fill="#13294b">Answers &#8216;what was true at this action&#8217;.</text>
  </g>

  <!-- Right panel: User property -->
  <g>
    <rect x="376" y="0" width="336" height="320" rx="12" ry="12" fill="#f8f9fb" stroke="#6f7480" stroke-width="1" stroke-dasharray="4 4"/>
    <text x="396" y="36" font-size="14" font-weight="600" fill="#13294b">User property</text>

    <!-- The profile the property lives on -->
    <rect x="396" y="56" width="296" height="64" rx="8" ry="8" fill="#ffffff" stroke="#6f7480" stroke-width="1"/>
    <text x="412" y="82" font-size="14" font-weight="500" fill="#13294b">User <tspan font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace">usr-7</tspan></text>
    <text x="412" y="102" font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace" font-size="12" font-weight="400" fill="#1e2024">current_plan: enterprise</text>

    <!-- Mini event rows: the property applies from the update forward -->
    <rect x="396" y="132" width="296" height="32" rx="8" ry="8" fill="#ffffff" stroke="#6f7480" stroke-width="1"/>
    <path d="M 412 148 l 3.5 3.5 l 7 -8" fill="none" stroke="#1e61f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="432" y="152" font-size="12" font-weight="400" fill="#1e2024">Login</text>

    <rect x="396" y="172" width="296" height="32" rx="8" ry="8" fill="#ffffff" stroke="#6f7480" stroke-width="1"/>
    <path d="M 412 188 l 3.5 3.5 l 7 -8" fill="none" stroke="#1e61f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="432" y="192" font-size="12" font-weight="400" fill="#1e2024">Purchase</text>

    <rect x="396" y="212" width="296" height="32" rx="8" ry="8" fill="#ffffff" stroke="#6f7480" stroke-width="1"/>
    <path d="M 412 228 l 3.5 3.5 l 7 -8" fill="none" stroke="#1e61f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="432" y="232" font-size="12" font-weight="400" fill="#1e2024">Report viewed</text>

    <text x="396" y="276" font-size="11" font-weight="400" fill="#13294b">Applies to later events until updated.</text>
    <text x="396" y="294" font-size="11" font-weight="400" fill="#13294b">Captures the person-level value at event time.</text>
  </g>
</svg>
