Current section
Files
Jump to
Current section
Files
guides/assets/evolution-lifecycle.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
</marker>
<linearGradient id="evalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#e3f2fd"/>
<stop offset="100%" style="stop-color:#bbdefb"/>
</linearGradient>
<linearGradient id="selectGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff3e0"/>
<stop offset="100%" style="stop-color:#ffe0b2"/>
</linearGradient>
<linearGradient id="breedGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#e8f5e9"/>
<stop offset="100%" style="stop-color:#c8e6c9"/>
</linearGradient>
<linearGradient id="mutateGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fce4ec"/>
<stop offset="100%" style="stop-color:#f8bbd9"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#333">
Neuroevolution Lifecycle
</text>
<!-- Central population -->
<ellipse cx="400" cy="250" rx="80" ry="50" fill="#f5f5f5" stroke="#666" stroke-width="2"/>
<text x="400" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">Population</text>
<text x="400" y="265" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">N individuals</text>
<!-- 1. Evaluate -->
<rect x="70" y="100" width="140" height="80" rx="10" fill="url(#evalGrad)" stroke="#1976d2" stroke-width="2" filter="url(#shadow)"/>
<text x="140" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1565c0">1. Evaluate</text>
<text x="140" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">Parallel fitness</text>
<text x="140" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">calculation</text>
<!-- 2. Select -->
<rect x="590" y="100" width="140" height="80" rx="10" fill="url(#selectGrad)" stroke="#f57c00" stroke-width="2" filter="url(#shadow)"/>
<text x="660" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#e65100">2. Select</text>
<text x="660" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">Top N%</text>
<text x="660" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">survive</text>
<!-- 3. Breed -->
<rect x="590" y="320" width="140" height="80" rx="10" fill="url(#breedGrad)" stroke="#4caf50" stroke-width="2" filter="url(#shadow)"/>
<text x="660" y="350" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2e7d32">3. Breed</text>
<text x="660" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">Crossover</text>
<text x="660" y="385" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">parents</text>
<!-- 4. Mutate -->
<rect x="70" y="320" width="140" height="80" rx="10" fill="url(#mutateGrad)" stroke="#e91e63" stroke-width="2" filter="url(#shadow)"/>
<text x="140" y="350" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#c2185b">4. Mutate</text>
<text x="140" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">Perturb</text>
<text x="140" y="385" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#666">weights</text>
<!-- Arrows: Population to Evaluate -->
<path d="M 320 220 Q 220 180 210 175" fill="none" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Arrow: Evaluate to Select -->
<line x1="210" y1="140" x2="588" y2="140" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Arrow: Select to Breed -->
<line x1="660" y1="180" x2="660" y2="318" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Arrow: Breed to Mutate -->
<line x1="590" y1="360" x2="212" y2="360" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Arrow: Mutate to Population -->
<path d="M 140 320 Q 140 280 320 260" fill="none" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Generation counter -->
<rect x="340" y="430" width="120" height="40" rx="5" fill="#e0e0e0" stroke="#666" stroke-width="1"/>
<text x="400" y="455" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333">Generation++</text>
<!-- Arrow from cycle to generation -->
<line x1="400" y1="300" x2="400" y2="428" stroke="#666" stroke-width="1" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
<!-- Legend -->
<rect x="50" y="460" width="700" height="30" fill="#f5f5f5" rx="5"/>
<rect x="70" y="470" width="15" height="15" fill="url(#evalGrad)" stroke="#1976d2"/>
<text x="95" y="483" font-family="Arial, sans-serif" font-size="10" fill="#333">Evaluate</text>
<rect x="170" y="470" width="15" height="15" fill="url(#selectGrad)" stroke="#f57c00"/>
<text x="195" y="483" font-family="Arial, sans-serif" font-size="10" fill="#333">Select</text>
<rect x="260" y="470" width="15" height="15" fill="url(#breedGrad)" stroke="#4caf50"/>
<text x="285" y="483" font-family="Arial, sans-serif" font-size="10" fill="#333">Breed</text>
<rect x="345" y="470" width="15" height="15" fill="url(#mutateGrad)" stroke="#e91e63"/>
<text x="370" y="483" font-family="Arial, sans-serif" font-size="10" fill="#333">Mutate</text>
</svg>