mirror of
https://github.com/prdlk/leetcode.git
synced 2026-11-02 21:22:43 +00:00
97 lines
5.5 KiB
XML
97 lines
5.5 KiB
XML
|
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<!-- Background (REQUIRED) -->
|
||
|
|
<rect width="800" height="450" fill="#f8f9fa" rx="10"/>
|
||
|
|
|
||
|
|
<!-- Title and Subtitle -->
|
||
|
|
<text x="400" y="45" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#2c3e50" text-anchor="middle">Same-Direction: Fixed Gap</text>
|
||
|
|
<text x="400" y="75" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d" text-anchor="middle">Maintaining a distance of N while traversing.</text>
|
||
|
|
|
||
|
|
<!-- State 1 -->
|
||
|
|
<g transform="translate(100, 150)">
|
||
|
|
<text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">1. Gap established (N=2)</text>
|
||
|
|
|
||
|
|
<!-- List -->
|
||
|
|
<g transform="translate(50, 20)">
|
||
|
|
<!-- Pointers -->
|
||
|
|
<polygon points="0,5 -5,-5 5,-5" fill="#3498db"/>
|
||
|
|
<text x="0" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">left</text>
|
||
|
|
|
||
|
|
<polygon points="160,5 155,-5 165,-5" fill="#f39c12"/>
|
||
|
|
<text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f39c12" text-anchor="middle">right</text>
|
||
|
|
|
||
|
|
<!-- Nodes -->
|
||
|
|
<circle cx="0" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
|
||
|
|
<text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
|
||
|
|
|
||
|
|
<circle cx="80" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
|
||
|
|
|
||
|
|
<circle cx="160" cy="25" r="22" fill="#fff7ed" stroke="#f39c12" stroke-width="3"/>
|
||
|
|
<text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
|
||
|
|
|
||
|
|
<circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
|
||
|
|
|
||
|
|
<circle cx="320" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
|
||
|
|
|
||
|
|
<!-- Connectors -->
|
||
|
|
<line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
|
||
|
|
<!-- Gap marker -->
|
||
|
|
<path d="M 0,60 L 0,70 L 160,70 L 160,60" fill="none" stroke="#7f8c8d" stroke-width="2"/>
|
||
|
|
<text x="80" y="85" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#7f8c8d" text-anchor="middle">GAP OF 2</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Transition -->
|
||
|
|
<g transform="translate(400, 260)">
|
||
|
|
<path d="M 0,0 L 0,30" stroke="#dee2e6" stroke-width="2" fill="none"/>
|
||
|
|
<text x="10" y="20" font-family="Arial, sans-serif" font-size="14" font-style="italic" fill="#7f8c8d">Move both together</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- State 2 -->
|
||
|
|
<g transform="translate(100, 340)">
|
||
|
|
<text x="0" y="-30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#2c3e50">2. Right hits the end</text>
|
||
|
|
|
||
|
|
<!-- List -->
|
||
|
|
<g transform="translate(50, 20)">
|
||
|
|
<!-- Pointers -->
|
||
|
|
<polygon points="160,5 155,-5 165,-5" fill="#3498db"/>
|
||
|
|
<text x="160" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3498db" text-anchor="middle">left</text>
|
||
|
|
|
||
|
|
<polygon points="320,5 315,-5 325,-5" fill="#f39c12"/>
|
||
|
|
<text x="320" y="-10" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f39c12" text-anchor="middle">right</text>
|
||
|
|
|
||
|
|
<!-- Nodes -->
|
||
|
|
<circle cx="0" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="0" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">1</text>
|
||
|
|
|
||
|
|
<circle cx="80" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="80" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">2</text>
|
||
|
|
|
||
|
|
<circle cx="160" cy="25" r="22" fill="#e3f2fd" stroke="#3498db" stroke-width="3"/>
|
||
|
|
<text x="160" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">3</text>
|
||
|
|
|
||
|
|
<circle cx="240" cy="25" r="22" fill="#ffffff" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<text x="240" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">4</text>
|
||
|
|
|
||
|
|
<circle cx="320" cy="25" r="22" fill="#fff7ed" stroke="#f39c12" stroke-width="3"/>
|
||
|
|
<text x="320" y="31" font-family="monospace" font-size="18" text-anchor="middle" fill="#2c3e50">5</text>
|
||
|
|
|
||
|
|
<!-- Connectors -->
|
||
|
|
<line x1="22" y1="25" x2="58" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="102" y1="25" x2="138" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="182" y1="25" x2="218" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
<line x1="262" y1="25" x2="298" y2="25" stroke="#94a3b8" stroke-width="2"/>
|
||
|
|
|
||
|
|
<!-- Gap marker -->
|
||
|
|
<path d="M 160,60 L 160,70 L 320,70 L 320,60" fill="none" stroke="#7f8c8d" stroke-width="2"/>
|
||
|
|
<text x="240" y="85" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#7f8c8d" text-anchor="middle">STILL GAP OF 2</text>
|
||
|
|
</g>
|
||
|
|
<text x="400" y="45" font-family="Arial, sans-serif" font-size="14" fill="#2c3e50">Left is now N steps from the end.</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|