9cef9b8d57
Merge _configs/ into config/ for single configuration directory. Update all path references. Changes: - Move _configs/* to config/ - Update .gitignore for new patterns - No code references to _configs/ found Impact: -1 root directory (layout_conventions.md compliance)
124 lines
5.8 KiB
XML
124 lines
5.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" width="600" height="600">
|
|
<!-- SYNTAXIS Infinite Loop Diagram -->
|
|
|
|
<defs>
|
|
<style>
|
|
.title { font-family: Inter, sans-serif; font-size: 24px; font-weight: 700; fill: #2C5F8E; }
|
|
.phase-label { font-family: Inter, sans-serif; font-size: 16px; font-weight: 700; }
|
|
.time-label { font-family: 'Courier New', monospace; font-size: 13px; fill: #4b5563; }
|
|
.description { font-family: Inter, sans-serif; font-size: 12px; fill: #6B7280; }
|
|
</style>
|
|
|
|
<!-- Gradients for phases -->
|
|
<linearGradient id="assemblyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3B7CB8;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#2C5F8E;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="breathingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6B7280;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#94a3b8;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="disassemblyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#D97706;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="300" y="40" text-anchor="middle" class="title">Loop Infinito SYNTAXIS</text>
|
|
<text x="300" y="65" text-anchor="middle" style="font-size: 14px; fill: #6B7280;">Ciclo completo: 16 segundos</text>
|
|
|
|
<!-- Center circle background -->
|
|
<circle cx="300" cy="320" r="180" fill="#f9fafb" stroke="#e5e7eb" stroke-width="2"/>
|
|
|
|
<!-- Circular segments -->
|
|
<!-- Assembly: 0-4s (0-90°) -->
|
|
<path d="M 300,320 L 300,140 A 180,180 0 0,1 480,320 Z"
|
|
fill="url(#assemblyGrad)" opacity="0.3" stroke="#3B7CB8" stroke-width="3"/>
|
|
|
|
<!-- Breathing: 4-12s (90-270°) -->
|
|
<path d="M 300,320 L 480,320 A 180,180 0 1,1 120,320 Z"
|
|
fill="url(#breathingGrad)" opacity="0.3" stroke="#6B7280" stroke-width="3"/>
|
|
|
|
<!-- Disassembly: 12-16s (270-360°) -->
|
|
<path d="M 300,320 L 120,320 A 180,180 0 0,1 300,140 Z"
|
|
fill="url(#disassemblyGrad)" opacity="0.3" stroke="#D97706" stroke-width="3"/>
|
|
|
|
<!-- Time markers on circle -->
|
|
<circle cx="300" cy="140" r="8" fill="#3B7CB8"/>
|
|
<text x="300" y="125" text-anchor="middle" class="time-label" font-weight="700">0s</text>
|
|
|
|
<circle cx="480" cy="320" r="8" fill="#6B7280"/>
|
|
<text x="495" y="325" text-anchor="start" class="time-label" font-weight="700">4s</text>
|
|
|
|
<circle cx="300" cy="500" r="8" fill="#6B7280"/>
|
|
<text x="300" y="520" text-anchor="middle" class="time-label" font-weight="700">12s</text>
|
|
|
|
<circle cx="120" cy="320" r="8" fill="#D97706"/>
|
|
<text x="105" y="325" text-anchor="end" class="time-label" font-weight="700">16s</text>
|
|
|
|
<!-- Center icon showing loop -->
|
|
<g transform="translate(300, 320)">
|
|
<circle cx="0" cy="0" r="60" fill="white" stroke="#2C5F8E" stroke-width="3"/>
|
|
|
|
<!-- Infinity symbol -->
|
|
<path d="M -30,-10 Q -20,-20 -10,-10 Q 0,0 10,-10 Q 20,-20 30,-10 Q 20,0 10,10 Q 0,20 -10,10 Q -20,0 -30,-10"
|
|
fill="none" stroke="#D97706" stroke-width="4"/>
|
|
|
|
<text x="0" y="35" text-anchor="middle" style="font-size: 11px; fill: #2C5F8E; font-weight: 700;">LOOP ∞</text>
|
|
</g>
|
|
|
|
<!-- Phase descriptions -->
|
|
|
|
<!-- Assembly -->
|
|
<g transform="translate(380, 180)">
|
|
<rect x="0" y="0" width="180" height="80" rx="8" fill="#eff6ff" stroke="#3B7CB8" stroke-width="2"/>
|
|
<text x="90" y="25" text-anchor="middle" class="phase-label" fill="#3B7CB8">1. Ensamblaje</text>
|
|
<text x="90" y="40" text-anchor="middle" class="time-label">0s - 4s</text>
|
|
<text x="90" y="58" text-anchor="middle" class="description">Piezas aparecen</text>
|
|
<text x="90" y="72" text-anchor="middle" class="description">con rotación 180°</text>
|
|
</g>
|
|
|
|
<!-- Breathing -->
|
|
<g transform="translate(420, 360)">
|
|
<rect x="0" y="0" width="180" height="80" rx="8" fill="#f9fafb" stroke="#6B7280" stroke-width="2"/>
|
|
<text x="90" y="25" text-anchor="middle" class="phase-label" fill="#6B7280">2. Respiración</text>
|
|
<text x="90" y="40" text-anchor="middle" class="time-label">4s - 12s (8s)</text>
|
|
<text x="90" y="58" text-anchor="middle" class="description">Logo respira</text>
|
|
<text x="90" y="72" text-anchor="middle" class="description">sutilmente</text>
|
|
</g>
|
|
|
|
<!-- Disassembly -->
|
|
<g transform="translate(0, 360)">
|
|
<rect x="0" y="0" width="180" height="80" rx="8" fill="#fffbeb" stroke="#D97706" stroke-width="2"/>
|
|
<text x="90" y="25" text-anchor="middle" class="phase-label" fill="#D97706">3. Desensamblaje</text>
|
|
<text x="90" y="40" text-anchor="middle" class="time-label">12s - 16s</text>
|
|
<text x="90" y="58" text-anchor="middle" class="description">Piezas desaparecen</text>
|
|
<text x="90" y="72" text-anchor="middle" class="description">rotación -180°</text>
|
|
</g>
|
|
|
|
<!-- Arrow indicators -->
|
|
<defs>
|
|
<marker id="arrowLoop" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
|
<polygon points="0 0, 10 3, 0 6" fill="#2C5F8E"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Curved arrow showing loop direction -->
|
|
<path d="M 280,140 A 200,200 0 0,1 465,305"
|
|
fill="none" stroke="#2C5F8E" stroke-width="2"
|
|
stroke-dasharray="5,5" marker-end="url(#arrowLoop)"/>
|
|
|
|
<path d="M 305,500 A 200,200 0 0,1 135,335"
|
|
fill="none" stroke="#2C5F8E" stroke-width="2"
|
|
stroke-dasharray="5,5" marker-end="url(#arrowLoop)"/>
|
|
|
|
<!-- Bottom legend -->
|
|
<rect x="50" y="540" width="500" height="40" rx="8" fill="#eff6ff" stroke="#3B7CB8" stroke-width="2"/>
|
|
<text x="300" y="565" text-anchor="middle" style="font-size: 14px; fill: #2C5F8E; font-weight: 700;">
|
|
El ciclo se repite infinitamente: Assembly → Breathing → Disassembly → ∞
|
|
</text>
|
|
</svg>
|