c4b2c890e8
- Add GoatCounter script to site pages (cookie-free, no consent needed) - Update README: setup-phone section, DoT blog link, roadmap checkbox - Add DoT blog post source and SVG assets Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
130 lines
7.7 KiB
XML
130 lines
7.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 360" font-family="'DM Sans', system-ui, sans-serif" font-size="12">
|
||
<defs>
|
||
<marker id="arr-amber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#c0623a"/>
|
||
</marker>
|
||
<marker id="arr-dim" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#a39888"/>
|
||
</marker>
|
||
<filter id="shadow" x="-3%" y="-3%" width="106%" height="106%">
|
||
<feDropShadow dx="0" dy="1" stdDeviation="2" flood-opacity="0.06"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- Background -->
|
||
<rect width="720" height="360" rx="8" fill="#faf7f2"/>
|
||
|
||
<!-- Title -->
|
||
<text x="360" y="32" text-anchor="middle" font-size="15" font-weight="600" fill="#2c2418" font-family="'Instrument Serif', Georgia, serif" letter-spacing="-0.02em">UDP vs DoT — one lookup, three scenarios</text>
|
||
<text x="360" y="50" text-anchor="middle" font-size="11" fill="#a39888">Time flows downward. Amber = DNS work. Gray = TCP/TLS handshake overhead.</text>
|
||
|
||
<!-- ==================== Column 1: Plain UDP ==================== -->
|
||
<g transform="translate(20, 0)">
|
||
<!-- Column header -->
|
||
<text x="90" y="84" text-anchor="middle" font-size="13" font-weight="600" fill="#2c2418">Plain UDP DNS</text>
|
||
<text x="90" y="101" text-anchor="middle" font-size="10" fill="#a39888" letter-spacing="0.06em">PORT 53 · CLEARTEXT</text>
|
||
|
||
<!-- Lane labels -->
|
||
<text x="25" y="128" font-size="10" fill="#6b5e4f">client</text>
|
||
<text x="133" y="128" font-size="10" fill="#6b5e4f">server</text>
|
||
|
||
<!-- Lanes -->
|
||
<line x1="35" y1="138" x2="35" y2="198" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
<line x1="145" y1="138" x2="145" y2="198" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
|
||
<!-- query -->
|
||
<line x1="37" y1="148" x2="143" y2="160" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<text x="90" y="143" text-anchor="middle" font-size="10" fill="#9e4e2d" font-weight="500">query</text>
|
||
|
||
<!-- response -->
|
||
<line x1="143" y1="178" x2="37" y2="190" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<text x="90" y="205" text-anchor="middle" font-size="10" fill="#9e4e2d" font-weight="500">response</text>
|
||
|
||
<!-- Total cost badge -->
|
||
<rect x="20" y="225" width="140" height="32" rx="4" fill="#faf7f2" stroke="#d4cbba" stroke-width="1" filter="url(#shadow)"/>
|
||
<text x="90" y="241" text-anchor="middle" font-size="9" fill="#a39888" letter-spacing="0.04em">TOTAL LATENCY</text>
|
||
<text x="90" y="253" text-anchor="middle" font-size="11" font-weight="600" fill="#c0623a" font-family="'JetBrains Mono', monospace">1 × RTT</text>
|
||
</g>
|
||
|
||
<!-- ==================== Column 2: DoT cold ==================== -->
|
||
<g transform="translate(270, 0)">
|
||
<!-- Column header -->
|
||
<text x="90" y="84" text-anchor="middle" font-size="13" font-weight="600" fill="#2c2418">DoT — first query</text>
|
||
<text x="90" y="101" text-anchor="middle" font-size="10" fill="#a39888" letter-spacing="0.06em">PORT 853 · NEW CONNECTION</text>
|
||
|
||
<!-- Lane labels -->
|
||
<text x="25" y="128" font-size="10" fill="#6b5e4f">client</text>
|
||
<text x="133" y="128" font-size="10" fill="#6b5e4f">server</text>
|
||
|
||
<!-- Lanes -->
|
||
<line x1="35" y1="138" x2="35" y2="308" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
<line x1="145" y1="138" x2="145" y2="308" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
|
||
<!-- === RTT 1: TCP handshake === -->
|
||
<!-- SYN -->
|
||
<line x1="37" y1="145" x2="143" y2="153" stroke="#a39888" stroke-width="1.5" marker-end="url(#arr-dim)"/>
|
||
<!-- SYN-ACK -->
|
||
<line x1="143" y1="163" x2="37" y2="171" stroke="#a39888" stroke-width="1.5" marker-end="url(#arr-dim)"/>
|
||
<!-- ACK -->
|
||
<line x1="37" y1="181" x2="143" y2="189" stroke="#a39888" stroke-width="1.5" marker-end="url(#arr-dim)"/>
|
||
<!-- Label + RTT marker -->
|
||
<text x="168" y="170" font-size="9" fill="#a39888" font-family="'JetBrains Mono', monospace">1 rtt</text>
|
||
<text x="90" y="143" text-anchor="middle" font-size="9" fill="#6b5e4f" font-style="italic">TCP handshake</text>
|
||
|
||
<!-- === RTT 2: TLS 1.3 handshake === -->
|
||
<!-- ClientHello -->
|
||
<line x1="37" y1="208" x2="143" y2="216" stroke="#a39888" stroke-width="1.5" marker-end="url(#arr-dim)"/>
|
||
<!-- ServerHello + Cert + Finished -->
|
||
<line x1="143" y1="226" x2="37" y2="234" stroke="#a39888" stroke-width="1.5" marker-end="url(#arr-dim)"/>
|
||
<!-- Label + RTT marker -->
|
||
<text x="168" y="222" font-size="9" fill="#a39888" font-family="'JetBrains Mono', monospace">2 rtt</text>
|
||
<text x="90" y="205" text-anchor="middle" font-size="9" fill="#6b5e4f" font-style="italic">TLS 1.3 handshake</text>
|
||
|
||
<!-- === RTT 3: DNS exchange === -->
|
||
<!-- query (piggybacked on ClientFinished) -->
|
||
<line x1="37" y1="253" x2="143" y2="261" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<!-- response -->
|
||
<line x1="143" y1="271" x2="37" y2="279" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<!-- Label + RTT marker -->
|
||
<text x="168" y="267" font-size="9" fill="#a39888" font-family="'JetBrains Mono', monospace">3 rtt</text>
|
||
<text x="90" y="250" text-anchor="middle" font-size="10" fill="#9e4e2d" font-weight="500">query + response</text>
|
||
|
||
<!-- Total cost badge -->
|
||
<rect x="20" y="295" width="140" height="32" rx="4" fill="#faf7f2" stroke="#d4cbba" stroke-width="1" filter="url(#shadow)"/>
|
||
<text x="90" y="311" text-anchor="middle" font-size="9" fill="#a39888" letter-spacing="0.04em">TOTAL LATENCY</text>
|
||
<text x="90" y="323" text-anchor="middle" font-size="11" font-weight="600" fill="#c0623a" font-family="'JetBrains Mono', monospace">3 × RTT</text>
|
||
</g>
|
||
|
||
<!-- ==================== Column 3: DoT reused ==================== -->
|
||
<g transform="translate(520, 0)">
|
||
<!-- Column header -->
|
||
<text x="90" y="84" text-anchor="middle" font-size="13" font-weight="600" fill="#2c2418">DoT — reused session</text>
|
||
<text x="90" y="101" text-anchor="middle" font-size="10" fill="#a39888" letter-spacing="0.06em">PORT 853 · PERSISTENT TCP/TLS</text>
|
||
|
||
<!-- Lane labels -->
|
||
<text x="25" y="128" font-size="10" fill="#6b5e4f">client</text>
|
||
<text x="133" y="128" font-size="10" fill="#6b5e4f">server</text>
|
||
|
||
<!-- Lanes -->
|
||
<line x1="35" y1="138" x2="35" y2="198" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
<line x1="145" y1="138" x2="145" y2="198" stroke="#d4cbba" stroke-width="1" stroke-dasharray="2 3"/>
|
||
|
||
<!-- query -->
|
||
<line x1="37" y1="148" x2="143" y2="160" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<text x="90" y="143" text-anchor="middle" font-size="10" fill="#9e4e2d" font-weight="500">query</text>
|
||
|
||
<!-- response -->
|
||
<line x1="143" y1="178" x2="37" y2="190" stroke="#c0623a" stroke-width="2" marker-end="url(#arr-amber)"/>
|
||
<text x="90" y="205" text-anchor="middle" font-size="10" fill="#9e4e2d" font-weight="500">response</text>
|
||
|
||
<!-- Total cost badge -->
|
||
<rect x="20" y="225" width="140" height="32" rx="4" fill="#faf7f2" stroke="#d4cbba" stroke-width="1" filter="url(#shadow)"/>
|
||
<text x="90" y="241" text-anchor="middle" font-size="9" fill="#a39888" letter-spacing="0.04em">TOTAL LATENCY</text>
|
||
<text x="90" y="253" text-anchor="middle" font-size="11" font-weight="600" fill="#c0623a" font-family="'JetBrains Mono', monospace">1 × RTT</text>
|
||
|
||
<!-- Tiny caption -->
|
||
<text x="90" y="280" text-anchor="middle" font-size="9" fill="#a39888" font-style="italic">(handshake amortized</text>
|
||
<text x="90" y="292" text-anchor="middle" font-size="9" fill="#a39888" font-style="italic">across the session)</text>
|
||
</g>
|
||
</svg>
|