| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <radialGradient id="bgGlow" cx="50%" cy="40%" r="50%"> |
| 4 | <stop offset="0%" stop-color="#D4845A" stop-opacity="0.06"/> |
| 5 | <stop offset="100%" stop-color="#D4845A" stop-opacity="0"/> |
| 6 | </radialGradient> |
| 7 | <linearGradient id="dividerGrad" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 8 | <stop offset="0%" stop-color="#D4845A" stop-opacity="0"/> |
| 9 | <stop offset="30%" stop-color="#D4845A" stop-opacity="0.6"/> |
| 10 | <stop offset="70%" stop-color="#D4845A" stop-opacity="0.6"/> |
| 11 | <stop offset="100%" stop-color="#D4845A" stop-opacity="0"/> |
| 12 | </linearGradient> |
| 13 | </defs> |
| 14 | |
| 15 | <!-- Background --> |
| 16 | <rect width="1280" height="720" fill="#0F1117"/> |
| 17 | <rect width="1280" height="720" fill="url(#bgGlow)"/> |
| 18 | |
| 19 | <!-- Page header --> |
| 20 | <g id="header"> |
| 21 | <rect x="60" y="50" width="4" height="36" rx="2" fill="#D4845A"/> |
| 22 | <text x="78" y="80" font-family="'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="bold" fill="#E8E8EC">What Are Agents?</text> |
| 23 | <text x="78" y="108" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9CA3AF">The key architectural distinction in agentic systems</text> |
| 24 | </g> |
| 25 | |
| 26 | <!-- Central concept — breathing layout: two large blocks separated by vertical divider --> |
| 27 | |
| 28 | <!-- Left block: Workflows --> |
| 29 | <g id="concept-workflows"> |
| 30 | <use data-icon="chunk/arrow-right" x="140" y="220" width="48" height="48" fill="#5B9BD5"/> |
| 31 | <text x="140" y="310" font-family="'Helvetica Neue', Arial, sans-serif" font-size="28" font-weight="bold" fill="#5B9BD5">Workflows</text> |
| 32 | <text x="140" y="350" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" fill="#E8E8EC">LLMs and tools orchestrated</text> |
| 33 | <text x="140" y="375" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" fill="#E8E8EC">through predefined code paths.</text> |
| 34 | <text x="140" y="420" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Predictable · Consistent · Well-defined tasks</text> |
| 35 | |
| 36 | <!-- Visual: linear flow arrows --> |
| 37 | <rect x="140" y="470" width="100" height="44" rx="8" fill="#1A1D27" stroke="#5B9BD5" stroke-width="1" stroke-opacity="0.4"/> |
| 38 | <text x="190" y="498" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#5B9BD5">Step 1</text> |
| 39 | <rect x="260" y="486" width="24" height="12" rx="2" fill="#5B9BD5" fill-opacity="0.3"/> |
| 40 | <polygon points="284,486 296,492 284,498" fill="#5B9BD5" fill-opacity="0.5"/> |
| 41 | <rect x="310" y="470" width="100" height="44" rx="8" fill="#1A1D27" stroke="#5B9BD5" stroke-width="1" stroke-opacity="0.4"/> |
| 42 | <text x="360" y="498" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#5B9BD5">Step 2</text> |
| 43 | <rect x="430" y="486" width="24" height="12" rx="2" fill="#5B9BD5" fill-opacity="0.3"/> |
| 44 | <polygon points="454,486 466,492 454,498" fill="#5B9BD5" fill-opacity="0.5"/> |
| 45 | <rect x="480" y="470" width="100" height="44" rx="8" fill="#1A1D27" stroke="#5B9BD5" stroke-width="1" stroke-opacity="0.4"/> |
| 46 | <text x="530" y="498" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#5B9BD5">Step 3</text> |
| 47 | </g> |
| 48 | |
| 49 | <!-- Vertical divider --> |
| 50 | <rect x="638" y="200" width="3" height="340" rx="1.5" fill="url(#dividerGrad)"/> |
| 51 | <text x="640" y="190" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" font-weight="bold" fill="#D4845A">VS</text> |
| 52 | |
| 53 | <!-- Right block: Agents --> |
| 54 | <g id="concept-agents"> |
| 55 | <use data-icon="chunk/robot" x="720" y="220" width="48" height="48" fill="#D4845A"/> |
| 56 | <text x="720" y="310" font-family="'Helvetica Neue', Arial, sans-serif" font-size="28" font-weight="bold" fill="#D4845A">Agents</text> |
| 57 | <text x="720" y="350" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" fill="#E8E8EC">LLMs dynamically direct their</text> |
| 58 | <text x="720" y="375" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" fill="#E8E8EC">own processes and tool usage.</text> |
| 59 | <text x="720" y="420" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Flexible · Autonomous · Model-driven decisions</text> |
| 60 | |
| 61 | <!-- Visual: dynamic loop --> |
| 62 | <circle cx="860" cy="495" r="40" fill="none" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 63 | <text x="860" y="500" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="12" fill="#D4845A">LLM</text> |
| 64 | <rect x="940" y="475" width="72" height="36" rx="6" fill="#1A1D27" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 65 | <text x="976" y="498" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" fill="#D4845A">Tools</text> |
| 66 | <rect x="1040" y="475" width="72" height="36" rx="6" fill="#1A1D27" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 67 | <text x="1076" y="498" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" fill="#D4845A">Env</text> |
| 68 | <!-- Connecting lines --> |
| 69 | <line x1="900" y1="492" x2="938" y2="492" stroke="#D4845A" stroke-width="1" stroke-opacity="0.4"/> |
| 70 | <line x1="1012" y1="492" x2="1038" y2="492" stroke="#D4845A" stroke-width="1" stroke-opacity="0.4"/> |
| 71 | <!-- Return loop --> |
| 72 | <path d="M860,535 Q860,560 960,560 Q1076,560 1076,515" fill="none" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3" stroke-dasharray="4,4"/> |
| 73 | </g> |
| 74 | |
| 75 | <!-- Bottom insight --> |
| 76 | <g id="bottom-insight"> |
| 77 | <rect x="60" y="590" width="1160" height="1" fill="#2D3348" fill-opacity="0.4"/> |
| 78 | <use data-icon="chunk/lightbulb" x="60" y="612" width="24" height="24" fill="#E8B87D"/> |
| 79 | <text x="96" y="632" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#E8B87D" font-weight="bold">Key Insight:</text> |
| 80 | <text x="220" y="632" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9CA3AF">All these variations are "agentic systems" — the spectrum matters more than the label.</text> |
| 81 | </g> |
| 82 | |
| 83 | <!-- Footer --> |
| 84 | <g id="footer"> |
| 85 | <text x="1220" y="700" text-anchor="end" font-family="'Helvetica Neue', Arial, sans-serif" font-size="10" fill="#6B7280">02</text> |
| 86 | </g> |
| 87 | </svg> |
| 88 |