AI Agent Expressif
Prompt
The user wants to render your response in an iframe that will render the response in a web browser. If you use any external libraries, your answer should include the full HTML in the same code block. This includes any <script> or <link> tags. Do not mention the iframe in your response. user : A modern, professional, and conceptual illustration of an AI-powered support system. The image should visually represent automation, intelligence, and efficient workflow. Key Elements to Include: Central Theme: A sleek, futuristic brain or neural network icon made of light or digital particles, symbolizing the AI intelligence (Gemini LLM). Workflow Representation: Show a flow of documents or tickets (stylized as paper tickets with a Jira logo or simple clipboards) moving into the AI brain. Routing & Action: From the brain, the tickets are neatly sorted and routed into different, color-coded pathways or channels. This represents the classification into categories (Demande, Incident, etc.). Platforms & Resolution: At the end of these pathways, show simple icons for Google Cloud Platform (GCP) and a server rack (for Legacy systems), with checkmarks or gears above them to show successful processing. Overall Feel: The style should be clean, corporate, and slightly techy. Use a cool color palette (blues, purples, greens) with one or two accent colors (e.g., orange or yellow for the tickets/pathways) to draw attention to the flow. The background should be minimal, perhaps a very light gradient or abstract geometric shapes. Style: Digital illustration, flat design with subtle shadows for depth, professional and clear, suitable for a corporate presentation or project announcement. --ar 16:9 (Use this aspect ratio for a presentation slide or wide banner. You can change it to --ar 1:1 for a blog post or social media square.)
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AI-Powered Support System Illustration</title>
<style>
/* ——— Layout & Background ——— */
html,body{
height:100%;
margin:0;
font-family:Inter,Arial,Helvetica,sans-serif;
background:linear-gradient(135deg,#f7faff 0%,#e7eeff 100%);
display:flex;
justify-content:center;
align-items:center;
}
svg{
width:90vw; /* keeps 16:9 ratio while being responsive */
max-width:1400px;
height:auto;
}
/* ——— Ticket animation (in-flow) ——— */
.ticket path,
.ticket rect{
animation:moveIn 6s ease-in-out infinite;
}
.ticket:nth-of-type(2) *{ animation-delay:1.5s; }
.ticket:nth-of-type(3) *{ animation-delay:3s; }
@keyframes moveIn{
0% {transform:translateX(-320px);opacity:0;}
25% {opacity:1;}
60% {transform:translateX(0);opacity:1;}
100% {transform:translateX(0);opacity:1;}
}
/* ——— Flow-line motion ——— */
.flow{
stroke-dasharray:6 6;
animation:dash 4s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-24;}}
</style>
</head>
<body>
<!-- 16 : 9 artboard -->
<svg viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg">
<!-- ********* GRADIENT DEFINITIONS ********* -->
<defs>
<radialGradient id="brainGlow" cx=".5" cy=".5" r=".5">
<stop offset="0%" stop-color="#00D1FF"/>
<stop offset="100%" stop-color="#5B53FF"/>
</radialGradient>
<linearGradient id="pathBlue" x1="0" x2="1">
<stop offset="0%" stop-color="#5B53FF"/><stop offset="100%" stop-color="#00D1FF"/>
</linearGradient>
<linearGradient id="pathGreen" x1="0" x2="1">
<stop offset="0%" stop-color="#22C55E"/><stop offset="100%" stop-color="#10B981"/>
</linearGradient>
<linearGradient id="pathOrange" x1="0" x2="1">
<stop offset="0%" stop-color="#FACC15"/><stop offset="100%" stop-color="#FB923C"/>
</linearGradient>
</defs>
<!-- ********* PATHWAYS (classification routes) ********* -->
<path d="M860 450 Q1050 450 1150 350 L1350 350" stroke="url(#pathBlue)" stroke-width="10" fill="none" class="flow"/>
<path d="M860 470 Q1050 550 1150 550 L1350 550" stroke="url(#pathGreen)" stroke-width="10" fill="none" class="flow"/>
<path d="M860 490 Q1050 650 1150 750 L1350 750" stroke="url(#pathOrange)"stroke-width="10" fill="none" class="flow"/>
<!-- ********* BRAIN / GEMINI CORE ********* -->
<circle cx="800" cy="450" r="185" fill="url(#brainGlow)" opacity=".25"/>
<g stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<!-- left lobe -->
<path d="M780 375c-35 0-65 25-65 55s45 35 45 65-45 35-45 65 30 55 65 55"/>
<!-- right lobe -->
<path d="M820 375c35 0 65 25 65 55s-45 35-45 65 45 35 45 65-30 55-65 55"/>
</g>
<!-- connection nodes -->
<g fill="#5B53FF" stroke="none">
<circle cx="760" cy="435" r="10"/>
<circle cx="840" cy="435" r="10"/>
<circle cx="760" cy="515" r="10"/>
<circle cx="840" cy="515" r="10"/>
<circle cx="800" cy="450" r="22" fill="#00D1FF"/>
</g>
<!-- ********* INCOMING TICKETS ********* -->
<g class="ticket">
<rect x="200" y="300" width="170" height="85" rx="10" fill="#FBBF24"/>
<text x="285" y="355" font-size="46" text-anchor="middle" fill="#fff" font-family="Arial,Helvetica,sans-serif">J</text>
</g>
<g class="ticket">
<rect x="200" y="400" width="170" height="85" rx="10" fill="#FDBA74"/>
<text x="285" y="455" font-size="46" text-anchor="middle" fill="#fff">J</text>
</g>
<g class="ticket">
<rect x="200" y="500" width="170" height="85" rx="10" fill="#FBBF24"/>
<text x="285" y="555" font-size="46" text-anchor="middle" fill="#fff">J</text>
</g>
<!-- ********* DESTINATION — GCP ********* -->
<g transform="translate(1350 285)">
<!-- stylised 4-color icon -->
<rect x="-40" y="-40" width="80" height="80" rx="12" fill="#4285F4"/>
<rect x="40" y="-40" width="80" height="80" rx="12" fill="#FBBC05"/>
<rect x="-40" y="40" width="80" height="80" rx="12" fill="#34A853"/>
<rect x="40" y="40" width="80" height="80" rx="12" fill="#EA4335"/>
<!-- success check -->
<g transform="translate(0,-90)">
<circle r="20" fill="#10B981"/>
<path d="M-8 0 0 8 12 -8" fill="none" stroke="#fff" stroke-width="3"/>
</g>
<text x="0" y="110" font-size="26" text-anchor="middle" fill="#475569">GCP</text>
</g>
<!-- ********* DESTINATION — LEGACY SERVER ********* -->
<g transform="translate(1350 735)">
<rect x="-65" y="-90" width="130" height="180" rx="12" fill="#1E293B"/>
<g fill="#334155">
<rect x="-45" y="-70" width="90" height="22" rx="4"/>
<rect x="-45" y="-40" width="90" height="22" rx="4"/>
<rect x="-45" y="-10" width="90" height="22" rx="4"/>
<rect x="-45" y="20" width="90" height="22" rx="4"/>
</g>
<g transform="translate(0,-120)">
<circle r="20" fill="#10B981"/>
<path d="M-8 0 0 8 12 -8" fill="none" stroke="#fff" stroke-width="3"/>
</g>
<text x="0" y="115" font-size="26" text-anchor="middle" fill="#475569">Legacy</text>
</g>
<!-- ********* CATEGORY LABELS ********* -->
<text x="990" y="330" font-size="28" fill="#5B53FF">Demande</text>
<text x="990" y="530" font-size="28" fill="#22C55E">Incident</text>
<text x="990" y="730" font-size="28" fill="#FB923C">Autres</text>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Powered Support System</title>
<style>
/* General Setup */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
/* Container to enforce aspect ratio */
.illustration-container {
width: 95vw;
max-width: 1400px;
aspect-ratio: 16 / 9;
background-color: #161b22;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
svg {
width: 100%;
height: 100%;
}
/* --- Animation Definitions --- */
/* Flowing particles for brain and paths */
@keyframes flow {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
/* Tickets moving towards the brain */
@keyframes ticket-flow-1 {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translate(350px, 150px); opacity: 0; }
}
@keyframes ticket-flow-2 {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translate(450px, 0px); opacity: 0; }
}
@keyframes ticket-flow-3 {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translate(350px, -150px); opacity: 0; }
}
/* Pulsating glow for the AI brain */
@keyframes pulsate-glow {
0%, 100% { filter: brightness(1) drop-shadow(0 0 15px #6e44ff); }
50% { filter: brightness(1.3) drop-shadow(0 0 25px #8e6aff); }
}
/* Brain particles orbiting */
@keyframes orbit {
from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
/* Pop-in animation for checkmarks */
@keyframes pop-in {
0% { transform: scale(0); opacity: 0; }
80% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Gear rotation */
@keyframes rotate-gear {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* --- Element Styling --- */
/* AI Brain Elements */
.ai-brain-core {
animation: pulsate-glow 4s ease-in-out infinite;
}
.ai-brain-particle {
animation: orbit 6s linear infinite;
}
.ai-brain-particle:nth-child(2) { animation-delay: -1s; animation-duration: 7s; }
.ai-brain-particle:nth-child(3) { animation-delay: -2s; animation-duration: 5s; }
.ai-brain-particle:nth-child(4) { animation-delay: -3s; animation-duration: 8s; }
.ai-brain-particle:nth-child(5) { animation-delay: -4s; animation-duration: 6.5s; }
.ai-brain-particle:nth-child(6) { animation-delay: -5s; animation-duration: 7.5s; }
/* Input Tickets */
.ticket { fill: #ffffff; stroke: #d1d5db; stroke-width: 2; }
.ticket-accent { fill: #f59e0b; }
.ticket-group { animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
#ticket-1 { animation-name: ticket-flow-1; animation-delay: 0s; }
#ticket-2 { animation-name: ticket-flow-2; animation-delay: 1.5s; }
#ticket-3 { animation-name: ticket-flow-3; animation-delay: 3s; }
/* Output Pathways */
.pathway-flow {
stroke-dasharray: 10 20;
animation: flow 2s linear infinite reverse;
}
.pathway-demand { stroke: #22c55e; }
.pathway-incident { stroke: #f59e0b; }
.pathway-request { stroke: #3b82f6; }
/* Text Labels */
.label {
font-size: 22px;
font-weight: 600;
fill: #9ca3af;
text-anchor: middle;
}
.title-label {
font-size: 28px;
font-weight: bold;
fill: #e5e7eb;
text-anchor: start;
}
/* Resolution Icons */
.resolution-icon {
opacity: 0;
transform-origin: center;
animation: pop-in 0.5s ease-out forwards;
animation-delay: 4.5s;
}
#gear-icon {
transform-origin: center;
animation: pop-in 0.5s ease-out forwards, rotate-gear 10s linear infinite;
animation-delay: 4.5s;
}
</style>
</head>
<body>
<div class="illustration-container">
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet">
<!-- Definitions: Gradients and Filters -->
<defs>
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#161b22;" />
<stop offset="100%" style="stop-color:#0d1117;" />
</linearGradient>
<radialGradient id="brain-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#a88bff" stop-opacity="0.8" />
<stop offset="60%" stop-color="#6e44ff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#6e44ff" stop-opacity="0" />
</radialGradient>
</defs>
<!-- Background -->
<rect width="1600" height="900" fill="url(#bg-gradient)" />
<path d="M -100 900 Q 400 600 800 900 T 1700 900" stroke="#2a303a" stroke-width="1.5" fill="none" opacity="0.5"/>
<path d="M -100 0 Q 400 300 800 0 T 1700 0" stroke="#2a303a" stroke-width="1.5" fill="none" opacity="0.5"/>
<!-- Main Title -->
<text x="50" y="80" class="title-label">AI-Powered Support Workflow</text>
<text x="50" y="115" class="label" text-anchor="start" fill="#6b7280">Tickets are automatically classified and routed for resolution.</text>
<!-- === LEFT: INCOMING TICKETS === -->
<g id="incoming-tickets">
<text x="180" y="240" class="label">Incoming Tickets</text>
<!-- Ticket 1 -->
<g id="ticket-1" class="ticket-group" transform="translate(150, 280)">
<rect class="ticket" width="100" height="60" rx="5" />
<rect class="ticket-accent" width="100" height="10" rx="2" y-="2" />
<text x="50" y="40" text-anchor="middle" font-weight="bold" font-size="20">J</text>
</g>
<!-- Ticket 2 -->
<g id="ticket-2" class="ticket-group" transform="translate(150, 430)">
<rect class="ticket" width="100" height="60" rx="5" />
<rect class="ticket-accent" width="100" height="10" rx="2" y-="2" />
<path d="M 20 30 h 60 M 20 45 h 40" stroke="#9ca3af" stroke-width="4" stroke-linecap="round" />
</g>
<!-- Ticket 3 -->
<g id="ticket-3" class="ticket-group" transform="translate(150, 580)">
<rect class="ticket" width="100" height="60" rx="5" />
<rect class="ticket-accent" width="100" height="10" rx="2" y-="2" />
<text x="50" y="40" text-anchor="middle" font-weight="bold" font-size="20">J</text>
</g>
</g>
<!-- === CENTER: AI BRAIN === -->
<g transform="translate(800, 450)">
<g class="ai-brain-core">
<!-- Glow effect -->
<circle cx="0" cy="0" r="150" fill="url(#brain-glow)" />
<!-- Neural Network Lines -->
<path d="M 0 -120 Q -80 -60 0 0 Q 80 -60 0 -120 M 0 120 Q -80 60 0 0 Q 80 60 0 120 M -120 0 Q -60 -80 0 0 Q -60 80 -120 0 M 120 0 Q 60 -80 0 0 Q 60 80 120 0"
stroke="#c4b5fd" stroke-width="2" fill="none" opacity="0.6"/>
<!-- Core Nodes -->
<circle cx="0" cy="0" r="30" fill="#ede9fe" />
<circle cx="0" cy="-120" r="10" fill="#c4b5fd" />
<circle cx="0" cy="120" r="10" fill="#c4b5fd" />
<circle cx="-120" cy="0" r="10" fill="#c4b5fd" />
<circle cx="120" cy="0" r="10" fill="#c4b5fd" />
<circle cx="85" cy="85" r="8" fill="#a78bfa" />
<circle cx="-85" cy="85" r="8" fill="#a78bfa" />
<circle cx="85" cy="-85" r="8" fill="#a78bfa" />
<circle cx="-85" cy="-85" r="8" fill="#a78bfa" />
</g>
<!-- Orbiting Particles -->
<g class="ai-brain-particle"><circle cx="70" cy="0" r="4" fill="#a78bfa"/></g>
<g class="ai-brain-particle"><circle cx="90" cy="0" r="3" fill="#c4b5fd"/></g>
<g class="ai-brain-particle"><circle cx="110" cy="0" r="5" fill="#d8b4fe"/></g>
<g class="ai-brain-particle"><circle cx="100" cy="0" r="3" fill="#a78bfa"/></g>
<g class="ai-brain-particle"><circle cx="80" cy="0" r="4" fill="#c4b5fd"/></g>
<g class="ai-brain-particle"><circle cx="120" cy="0" r="3" fill="#d8b4fe"/></g>
</g>
<!-- === RIGHT: ROUTING AND RESOLUTION === -->
<g id="routing-and-resolution">
<!-- Pathway 1: Demand -> GCP -->
<g>
<path id="path1" d="M 900 350 C 1050 350, 1150 250, 1300 250" stroke="#374151" stroke-width="6" fill="none"/>
<path class="pathway-flow pathway-demand" d="M 900 350 C 1050 350, 1150 250, 1300 250" stroke-width="6" fill="none"/>
<text x="1050" y="320" class="label pathway-demand">Demand</text>
<!-- GCP Icon -->
<g transform="translate(1350, 250)">
<path d="M-52.5,1.5 c-3.3,0-6.4,1.4-8.5,3.8c-2,2.3-2.6,5.6-1.5,8.7c-2.4-0.1-5,1.1-6.5,3.2c-1.5,2.1-1.5,5.1,0,7.2c-2.2-0.3-4.5,0.7-5.9,2.6 s-1.4,4.6,0,6.5c-1.8-0.5-3.8,0.2-5,1.7s-1.3,3.7,0,5.2c-0.8-0.2-1.6-0.2-2.3,0c-2.3,0.6-4,2.6-4.4,5s0.6,4.7,2.8,6.2 c1.1,0.7,2.4,1,3.7,1c2.8,0,5.4-1.7,6.5-4.4c1.1-2.7,0.3-5.8-1.9-7.5c2.3,0.3,4.8-0.8,6.3-2.9c1.5-2.1,1.5-5.1,0-7.2 c2.1,0.4,4.3-0.4,5.6-2.1c1.3-1.7,1.4-4.2,0.2-6.1c2.4,0.8,5,0,6.5-2c1.6-2,1.8-4.8,0.5-7C-43.5,3.5-47.8,1.5-52.5,1.5z" fill="#4285F4"/>
<path d="M-13.5-33.5c-13.8,0-25,11.2-25,25c0,1.9,0.2,3.7,0.6,5.5c-3.1-2-6.9-3-10.9-3c-11,0-20,9-20,20s9,20,20,20h73 c8.3,0,15-6.7,15-15c0-7.7-5.8-14-13.3-14.8C54.1-15.1,36.5-33.5-13.5-33.5z" fill="#4A4A4A" opacity="0.3"/>
<circle cx="-13.5" cy="-8.5" r="5" fill="#DB4437"/>
<circle cx="1.5" cy="-8.5" r="5" fill="#F4B400"/>
<circle cx="16.5" cy="-8.5" r="5" fill="#0F9D58"/>
<text class="label" y="55">GCP</text>
</g>
<!-- Checkmark -->
<path class="resolution-icon" transform="translate(1330, 180) scale(1.5)" d="M2,6 L5,9 L12,2" stroke="#22c55e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- Pathway 2: Incident -> Legacy -->
<g>
<path id="path2" d="M 920 450 C 1050 450, 1150 500, 1300 500" stroke="#374151" stroke-width="6" fill="none"/>
<path class="pathway-flow pathway-incident" d="M 920 450 C 1050 450, 1150 500, 1300 500" stroke-width="6" fill="none"/>
<text x="1070" y="475" class="label pathway-incident">Incident</text>
<!-- Server Rack Icon -->
<g transform="translate(1350, 500)">
<rect x="-40" y="-35" width="80" height="70" rx="5" fill="#374151"/>
<rect x="-35" y="-28" width="70" height="15" rx="2" fill="#4b5563"/>
<rect x="-35" y="-8" width="70" height="15" rx="2" fill="#4b5563"/>
<rect x="-35" y="12" width="70" height="15" rx="2" fill="#4b5563"/>
<circle cx="25" cy="-20.5" r="2" fill="#22c55e"/>
<circle cx="25" cy="-0.5" r="2" fill="#22c55e"/>
<circle cx="25" cy="19.5" r="2" fill="#f59e0b"/>
<text class="label" y="55">Legacy</text>
</g>
<!-- Gear Icon -->
<g id="gear-icon" transform="translate(1350, 430) scale(1.2)">
<path stroke="#f59e0b" stroke-width="2.5" fill="none" d="M 0 -10 v-4 M 0 10 v 4 M -10 0 h -4 M 10 0 h 4 M -7.07 -7.07 l-2.83 -2.83 M 7.07 7.07 l 2.83 2.83 M -7.07 7.07 l -2.83 2.83 M 7.07 -7.07 l 2.83 -2.83" stroke-linecap="round"/>
<circle r="8" stroke="#f59e0b" stroke-width="2.5" fill="none"/>
<circle r="3" fill="#f59e0b"/>
</g>
</g>
<!-- Pathway 3: Request -> Automation -->
<g>
<path id="path3" d="M 900 550 C 1050 550, 1150 650, 1300 650" stroke="#374151" stroke-width="6" fill="none"/>
<path class="pathway-flow pathway-request" d="M 900 550 C 1050 550, 1150 650, 1300 650" stroke-width="6" fill="none"/>
<text x="1050" y="580" class="label pathway-request">Request</text>
<!-- Automation Icon -->
<g transform="translate(1350, 650)">
<path d="M-20 -20 l10 0 l5 10 l5 -10 l10 0 l-12 20 l12 20 l-10 0 l-5 -10 l-5 10 l-10 0 l12 -20z" stroke="#3b82f6" fill="none" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/>
<text class="label" y="55">Automation</text>
</g>
<!-- Checkmark -->
<path class="resolution-icon" transform="translate(1330, 580) scale(1.5)" d="M2,6 L5,9 L12,2" stroke="#22c55e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI-powered Support System Illustration</title>
<meta name="viewport" content="width=1280, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Inter:400,600&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background: linear-gradient(110deg, #f7faff 0%, #e8edf7 100%);
font-family: 'Inter', Arial, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 1120px; /* 16:9 aspect on 1280x720 canvas */
height: 630px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 32px rgba(63,80,134,0.10);
border-radius: 28px;
position: relative;
overflow: hidden;
}
.credit {
position: absolute;
bottom: 16px;
right: 24px;
font-size: 11px;
color: #b0b8c5;
letter-spacing: 0.01em;
}
@media (max-width: 1200px) {
.container {
width: 100vw;
height: 56vw;
min-height: 360px;
min-width: 640px;
}
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 1120 630" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;">
<!-- Minimal geometric background -->
<rect x="60" y="60" width="1000" height="510" rx="38" fill="url(#bgGrad)" filter="url(#shadow)"/>
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="1000" y2="510" gradientUnits="userSpaceOnUse">
<stop stop-color="#F7FAFF"/>
<stop offset="1" stop-color="#E5EDFA"/>
</linearGradient>
<filter id="shadow" x="0" y="0" width="1120" height="630" filterUnits="userSpaceOnUse">
<feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#3F509020"/>
</filter>
<linearGradient id="brainGlow" x1="560" y1="210" x2="660" y2="310" gradientUnits="userSpaceOnUse">
<stop stop-color="#76C8F7" stop-opacity="0.92"/>
<stop offset="0.6" stop-color="#9265F9" stop-opacity="0.85"/>
<stop offset="1" stop-color="#2EE4C5" stop-opacity="0.68"/>
</linearGradient>
</defs>
<!-- AI Brain (central) -->
<g>
<!-- Glow -->
<ellipse cx="560" cy="310" rx="104" ry="76" fill="url(#brainGlow)" opacity="0.7" filter="url(#shadow)" />
<!-- Brain Shape (Stylized, particle neural net, GEMINI) -->
<g>
<!-- Brain outline -->
<path d="M485 267 Q510 197 560 220 Q610 197 635 267 Q680 323 640 355 Q668 400 610 380 Q600 425 560 410 Q520 425 510 380 Q452 400 480 355 Q438 323 485 267 Z"
stroke="#4B79E2" stroke-width="5" fill="white" filter="url(#shadow)" />
<!-- Neural network nodes/particles -->
<g>
<circle cx="500" cy="250" r="7" fill="#3ACFF7" />
<circle cx="530" cy="227" r="6.5" fill="#7C5AFE" />
<circle cx="590" cy="227" r="6.5" fill="#2EE4C5" />
<circle cx="620" cy="250" r="7" fill="#41D2E7" />
<circle cx="560" cy="217" r="8.5" fill="#F3C63C"/>
<circle cx="485" cy="305" r="7" fill="#82B6F7" />
<circle cx="640" cy="305" r="7" fill="#37CE81" />
<circle cx="610" cy="287" r="6.5" fill="#7C5AFE" />
<circle cx="510" cy="287" r="6.5" fill="#7C5AFE" />
<circle cx="560" cy="375" r="8.5" fill="#41D2E7"/>
<circle cx="520" cy="360" r="7" fill="#FFC692"/>
<circle cx="600" cy="360" r="7" fill="#50DEF5"/>
</g>
<!-- Neural links -->
<g stroke="#6AAEEB" stroke-width="2" opacity="0.7">
<line x1="530" y1="227" x2="560" y2="217"/>
<line x1="590" y1="227" x2="560" y2="217"/>
<line x1="520" y1="360" x2="560" y2="375"/>
<line x1="600" y1="360" x2="560" y2="375"/>
<line x1="510" y1="287" x2="485" y2="305"/>
<line x1="610" y1="287" x2="640" y2="305"/>
<line x1="485" y1="305" x2="500" y2="250"/>
<line x1="640" y1="305" x2="620" y2="250"/>
<line x1="520" y1="360" x2="510" y2="287"/>
<line x1="600" y1="360" x2="610" y2="287"/>
</g>
</g>
<!-- Gemini label (subtle) -->
<text x="558" y="265" text-anchor="middle" font-size="23" fill="#A897FE" font-weight="600" letter-spacing="0.03em" style="font-family:'Inter',Arial,sans-serif;opacity:0.88;">Gemini LLM</text>
</g>
<!-- Document/ticket flow (left, into brain) -->
<g>
<!-- Documents -->
<g>
<rect x="280" y="250" width="44" height="60" rx="8" fill="#FFECD2" stroke="#FAB839" stroke-width="2"/>
<rect x="310" y="290" width="44" height="60" rx="8" fill="#FFECD2" stroke="#FAB839" stroke-width="2" opacity="0.55"/>
<rect x="250" y="290" width="44" height="60" rx="8" fill="#FFECD2" stroke="#FAB839" stroke-width="2" opacity="0.5"/>
<!-- Jira "tick" -->
<g>
<circle cx="302" cy="275" r="13" fill="white"/>
<polygon points="302,280 298,273 302,277 307,270 308,272" fill="#0065FF"/>
</g>
</g>
<!-- Dotted flow arrow (suggesting automation) -->
<g>
<line x1="322" y1="310" x2="450" y2="290" stroke="#FAB839" stroke-width="6" stroke-dasharray="8 14" opacity="0.85"/>
<!--Arrowhead-->
<polygon points="446,288 454,288 450,294" fill="#FAB839"/>
</g>
</g>
<!-- Sorted ticket routing (right, out of brain) -->
<g>
<!-- Pathways -->
<g>
<!-- Demande (blue) -->
<path d="M610 350 Q800 400 970 250" stroke="#3388FF" stroke-width="12" fill="none" opacity="0.74"/>
<!-- Incident (orange) -->
<path d="M600 325 Q790 340 970 325" stroke="#FDB218" stroke-width="10" fill="none" opacity="0.82"/>
<!-- Change (green) -->
<path d="M595 300 Q790 280 970 390" stroke="#29E28E" stroke-width="10" fill="none" opacity="0.7"/>
</g>
<!-- Channel labels -->
<text x="720" y="270" font-size="20" fill="#3388FF" font-weight="600" letter-spacing="0.02em" style="font-family:'Inter',Arial,sans-serif;opacity:0.70;">Demande</text>
<text x="770" y="350" font-size="18" fill="#FDB218" font-weight="600" letter-spacing="0.02em" style="font-family:'Inter',Arial,sans-serif;opacity:0.70;">Incident</text>
<text x="820" y="420" font-size="18" fill="#29E28E" font-weight="600" letter-spacing="0.02em" style="font-family:'Inter',Arial,sans-serif;opacity:0.62;">Changement</text>
<!-- Tickets riding the flows -->
<g>
<rect x="930" y="230" width="38" height="49" rx="6" fill="#E6F0FF" stroke="#3388FF" stroke-width="2"/>
<rect x="930" y="310" width="38" height="49" rx="6" fill="#FFF9E4" stroke="#FDB218" stroke-width="2"/>
<rect x="930" y="365" width="38" height="49" rx="6" fill="#DDFCEF" stroke="#29E28E" stroke-width="2"/>
</g>
</g>
<!-- Platforms, processing, resolution (right end) -->
<g>
<!-- GCP Icon -->
<g>
<circle cx="1030" cy="255" r="25" fill="#F3F3F3" stroke="#C3CFFF" stroke-width="2"/>
<!-- GCP "hex" stylized -->
<polygon points="1030,242 1040,255 1030,268 1020,255" fill="#4285F4"/>
<polygon points="1030,242 1036,251 1024,251" fill="#34A853"/>
<polygon points="1030,268 1036,259 1024,259" fill="#FBBC05"/>
<!-- Checkmark on top -->
<polyline points="1023,256 1029,262 1038,250" stroke="#12CA57" stroke-width="3" fill="none"/>
</g>
<!-- Server Rack Icon -->
<g>
<rect x="1008" y="390" width="45" height="42" rx="8" fill="#222C44" stroke="#BAC6E4" stroke-width="2"/>
<rect x="1015" y="398" width="30" height="8" rx="2" fill="#354260"/>
<rect x="1015" y="409" width="30" height="8" rx="2" fill="#354260"/>
<rect x="1015" y="420" width="30" height="8" rx="2" fill="#354260"/>
<!-- Animated "status gears" -->
<g id="gear" transform="translate(1031,385)">
<circle r="9" fill="#5CE2F7"/>
<g id="teeth">
<rect x="-1.5" y="-11" width="3" height="6" fill="#45D1C9"/>
<rect x="6.2" y="-7" width="3" height="6" fill="#45D1C9" transform="rotate(45 0 0)"/>
<rect x="8" y="1.5" width="3" height="6" fill="#45D1C9" transform="rotate(90 0 0)"/>
<rect x="6.2" y="8" width="3" height="6" fill="#45D1C9" transform="rotate(135 0 0)"/>
<rect x="-1.5" y="11" width="3" height="6" fill="#45D1C9" transform="rotate(180 0 0)"/>
<rect x="-8" y="8" width="3" height="6" fill="#45D1C9" transform="rotate(225 0 0)"/>
<rect x="-10" y="1.5" width="3" height="6" fill="#45D1C9" transform="rotate(270 0 0)"/>
<rect x="-8" y="-7" width="3" height="6" fill="#45D1C9" transform="rotate(315 0 0)"/>
</g>
</g>
</g>
</g>
<!-- Subtle abstract shapes for techy feel -->
<ellipse cx="320" cy="110" rx="50" ry="14" fill="#B7F7FF" opacity="0.23"/>
<ellipse cx="900" cy="510" rx="60" ry="18" fill="#CEB5FF" opacity="0.14"/>
<rect x="250" y="540" width="120" height="18" rx="9" fill="#E3FFF7" opacity="0.18"/>
<rect x="830" y="135" width="84" height="11" rx="5.5" fill="#AEE2FB" opacity="0.09"/>
</svg>
<span class="credit">Digital illustration – conceptual AI workflow, 2024</span>
</div>
<script>
// Animate gear (server rack)
const gear = document.getElementById('gear');
let angle = 0;
setInterval(() => {
angle += 2;
gear.setAttribute('transform', `translate(1031,385) rotate(${angle})`);
}, 18);
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI-Powered Support System</title>
<style>
:root {
--primary-blue: #1E90FF;
--purple: #8A2BE2;
--accent-orange: #FFA500;
--light-bg: #F0F4F8;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #00008B, #000033);
font-family: 'Segoe UI', sans-serif;
}
.container {
width: 100vw;
height: 100vh;
aspect-ratio: 16 / 9;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
/* Abstract geometric background */
.bg-shape {
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
filter: blur(10px);
animation: float 10s infinite ease-in-out;
}
.bg-shape:nth-child(1) {
top: 10%;
left: -10%;
animation-delay: 0s;
}
.bg-shape:nth-child(2) {
bottom: 5%;
right: -15%;
animation-delay: 5s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(20px); }
}
/* AI Brain with Neural Network */
.ai-brain {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.neural-node {
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px 2px #ffffff55;
animation: glow 2s infinite ease-in-out;
}
@keyframes glow {
0%,100% { box-shadow: 0 0 8px 1px var(--primary-blue); }
50% { box-shadow: 0 0 15px 3px var(--purple); }
}
.node-link {
width: 2px;
height: 100px;
background: linear-gradient(to bottom, #1E90FF, #8A2BE2);
position: relative;
animation: link-pulse 3s infinite;
}
@keyframes link-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Workflow Tickets */
.ticket {
position: absolute;
width: 60px;
height: 40px;
background: linear-gradient(to bottom, #fff, #f8f8f8);
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
text-align: center;
font-size: 14px;
padding-top: 5px;
animation: flow 10s linear infinite;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="5" fill="%23FFA500"/></svg>');
background-repeat: no-repeat;
background-position: center top 2px;
}
@keyframes flow {
0% { transform: translateX(-150%) translateY(0%); }
100% { transform: translateX(150%) translateY(-30%); }
}
/* Pathway animation */
.pathway {
width: 4px;
height: 80px;
background: var(--accent-orange);
transform: rotate(20deg);
position: absolute;
animation: move-path 3s infinite ease-in-out;
}
@keyframes move-path {
0% { width: 0; opacity: 0.2; }
50% { opacity: 0.8; }
100% { width: 150px; opacity: 0; }
}
/* Platform icons */
.platform {
width: 80px;
height: 60px;
background: #252525;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
transition: transform 0.3s;
}
.platform:hover {
transform: translateY(-5px);
}
.platform::before {
content: '';
position: absolute;
bottom: -5px;
left: 10px;
width: 60px;
height: 5px;
background: linear-gradient(to right, #333, #555);
}
.cloud-icon {
width: 30px;
height: 20px;
margin: 5px auto;
background: #fff;
border-radius: 50% 50% 60% 40%;
box-shadow:
4px 0 0 #fff,
8px -2px 0 #fff,
-4px 0 0 #fff;
}
.checkmark {
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: 20px;
border: 2px solid #00DD00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: bounce 1s infinite alternate;
}
.checkmark::before {
content: "✓";
font-size: 12px;
color: #00DD00;
}
@keyframes bounce {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
/* Floating shadow elements */
.floating-shadow {
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
position: absolute;
bottom: 15%;
left: 45%;
border-radius: 50%;
filter: blur(20px);
animation: shadow-float 8s infinite ease-in-out;
}
@keyframes shadow-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
</style>
</head>
<body>
<div class="container">
<!-- Background abstract shapes -->
<div class="bg-shape"></div>
<div class="bg-shape"></div>
<!-- AI Brain Cluster -->
<div class="ai-brain" style="position: relative; z-index: 2;">
<div style="position: relative;">
<div class="neural-node" style="position: absolute; left: 0; top: 0;"></div>
<div class="neural-node" style="position: absolute; right: 0; top: 0;"></div>
<div class="neural-node" style="position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;"></div>
<div class="node-link" style="position: absolute; left: 25%; top: 15px;"></div>
<div class="node-link" style="position: absolute; right: 25%; top: 15px;"></div>
<div class="node-link" style="position: absolute; left: 50%; top: 15px; transform: translateX(-50%);"></div>
</div>
<!-- Ticket Flow Simulation -->
<div class="ticket" style="top: 30%; left: 30%">INC-123</div>
<div class="ticket" style="top: 40%; left: 25%">DEM-456</div>
<div class="ticket" style="top: 50%; left: 35%">REQ-789</div>
<!-- Pathway Lines -->
<div class="pathway" style="top: 50px; left: -45px; background: var(--accent-orange);"></div>
<div class="pathway" style="top: 50px; left: 45px; background: #3EB489;"></div>
<!-- Platform Blocks -->
<div class="platform" style="margin-top: 80px; background: #333; position: relative;">
<div class="cloud-icon" style="margin-top: 5px;"></div>
<div style="text-align: center; color: #fff; font-size: 13px;">GCP</div>
<div class="checkmark" style="background: #00DD0033;"></div>
</div>
<div class="platform" style="width: 90px; margin-top: 20px; background: #1A1A1A;">
<div style="display: flex; justify-content: space-between; padding: 5px 10px;">
<div style="width: 15px; height: 20px; background: #222;"></div>
<div style="width: 15px; height: 25px; background: #222;"></div>
<div style="width: 15px; height: 20px; background: #222;"></div>
</div>
<div style="text-align: center; color: #fff; font-size: 12px;">Legacy Sys</div>
<div class="checkmark" style="right: 15px; background: #00DD0033;"></div>
</div>
</div>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Powered Support System Illustration</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #f0f4f8, #d9e2ec);
overflow: hidden;
}
svg {
width: 100%;
max-width: 1600px;
height: auto;
display: block;
}
</style>
</head>
<body>
<svg viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg">
<!-- Background geometric shapes -->
<rect x="0" y="0" width="1600" height="900" fill="url(#bg-gradient)" />
<defs>
<linearGradient id="bg-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f0f4f8" />
<stop offset="100%" stop-color="#d9e2ec" />
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,0.1)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Abstract geometric background -->
<circle cx="200" cy="200" r="150" fill="#e6f0f8" opacity="0.5" />
<rect x="1200" y="600" width="200" height="200" fill="#e6f0f8" opacity="0.5" transform="rotate(45 1300 700)" />
<path d="M800 450 L900 300 L1000 450 Z" fill="#d9e2ec" opacity="0.7" />
<!-- Central AI Brain (Neural Network) -->
<g transform="translate(800, 450)" filter="url(#shadow)">
<!-- Brain outline -->
<path d="M-100,0 Q-150,-100 -100,-200 Q0,-250 100,-200 Q150,-100 100,0 Q150,100 100,200 Q0,250 -100,200 Q-150,100 -100,0" fill="none" stroke="#4a90e2" stroke-width="10" stroke-dasharray="5,5" />
<!-- Neural nodes -->
<circle cx="0" cy="0" r="20" fill="#4a90e2" />
<circle cx="-80" cy="-100" r="15" fill="#7ed321" />
<circle cx="80" cy="-100" r="15" fill="#7ed321" />
<circle cx="-80" cy="100" r="15" fill="#9013fe" />
<circle cx="80" cy="100" r="15" fill="#9013fe" />
<!-- Connections -->
<line x1="0" y1="0" x2="-80" y2="-100" stroke="#4a90e2" stroke-width="3" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="80" y2="-100" stroke="#4a90e2" stroke-width="3" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="-80" y2="100" stroke="#4a90e2" stroke-width="3" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="80" y2="100" stroke="#4a90e2" stroke-width="3" stroke-dasharray="2,2" />
<!-- Particles -->
<circle cx="-50" cy="-50" r="5" fill="#ffffff" opacity="0.8" />
<circle cx="50" cy="-50" r="5" fill="#ffffff" opacity="0.8" />
<circle cx="-50" cy="50" r="5" fill="#ffffff" opacity="0.8" />
<circle cx="50" cy="50" r="5" fill="#ffffff" opacity="0.8" />
<!-- Gemini LLM text -->
<text x="0" y="220" font-size="24" fill="#4a90e2" text-anchor="middle" font-family="Arial">Gemini LLM</text>
</g>
<!-- Incoming Tickets (stylized as clipboards with Jira-like logo) -->
<g filter="url(#shadow)">
<!-- Ticket 1 -->
<rect x="300" y="300" width="100" height="150" fill="#f5a623" rx="10" />
<rect x="310" y="310" width="80" height="20" fill="#ffffff" />
<text x="350" y="325" font-size="12" fill="#000" text-anchor="middle">Jira</text>
<path d="M300 350 L400 350" stroke="#000" stroke-width="1" />
<path d="M300 370 L400 370" stroke="#000" stroke-width="1" />
<!-- Arrow to brain -->
<path d="M400 375 Q550 450 700 450" fill="none" stroke="#f5a623" stroke-width="5" stroke-dasharray="5,5" marker-end="url(#arrowhead)" />
</g>
<g filter="url(#shadow)">
<!-- Ticket 2 -->
<rect x="300" y="500" width="100" height="150" fill="#f5a623" rx="10" />
<rect x="310" y="510" width="80" height="20" fill="#ffffff" />
<text x="350" y="525" font-size="12" fill="#000" text-anchor="middle">Ticket</text>
<path d="M300 550 L400 550" stroke="#000" stroke-width="1" />
<path d="M300 570 L400 570" stroke="#000" stroke-width="1" />
<!-- Arrow to brain -->
<path d="M400 575 Q550 500 700 450" fill="none" stroke="#f5a623" stroke-width="5" stroke-dasharray="5,5" marker-end="url(#arrowhead)" />
</g>
<!-- Outgoing Pathways (color-coded) -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#f5a623" />
</marker>
</defs>
<!-- Pathway 1: Blue to GCP -->
<path d="M900 450 Q1050 400 1200 350" fill="none" stroke="#4a90e2" stroke-width="10" stroke-dasharray="5,5" marker-end="url(#arrowhead-blue)" />
<defs>
<marker id="arrowhead-blue" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#4a90e2" />
</marker>
</defs>
<!-- Pathway 2: Green to Legacy -->
<path d="M900 450 Q1050 500 1200 550" fill="none" stroke="#7ed321" stroke-width="10" stroke-dasharray="5,5" marker-end="url(#arrowhead-green)" />
<defs>
<marker id="arrowhead-green" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#7ed321" />
</marker>
</defs>
<!-- Pathway 3: Purple -->
<path d="M900 450 Q1050 450 1200 450" fill="none" stroke="#9013fe" stroke-width="10" stroke-dasharray="5,5" marker-end="url(#arrowhead-purple)" />
<defs>
<marker id="arrowhead-purple" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#9013fe" />
</marker>
</defs>
<!-- Endpoints -->
<!-- GCP Icon -->
<g transform="translate(1300, 300)" filter="url(#shadow)">
<path d="M0 0 Q50 -50 100 0 Q50 50 0 0" fill="#4a90e2" /> <!-- Cloud shape -->
<text x="50" y="70" font-size="20" fill="#4a90e2" text-anchor="middle">GCP</text>
<path d="M40 -10 L50 10 L70 0" fill="none" stroke="#7ed321" stroke-width="5" /> <!-- Checkmark -->
</g>
<!-- Server Rack Icon -->
<g transform="translate(1300, 500)" filter="url(#shadow)">
<rect x="0" y="0" width="100" height="150" fill="#9013fe" rx="5" />
<rect x="10" y="10" width="80" height="30" fill="#ffffff" />
<rect x="10" y="50" width="80" height="30" fill="#ffffff" />
<rect x="10" y="90" width="80" height="30" fill="#ffffff" />
<text x="50" y="170" font-size="20" fill="#9013fe" text-anchor="middle">Legacy</text>
<circle cx="50" cy="-20" r="15" fill="#7ed321" /> <!-- Gear/Check -->
<circle cx="50" cy="-20" r="10" fill="none" stroke="#ffffff" stroke-width="2" stroke-dasharray="2,2" />
</g>
<!-- Third endpoint placeholder -->
<g transform="translate(1300, 400)" filter="url(#shadow)">
<rect x="0" y="0" width="100" height="100" fill="#7ed321" rx="10" />
<text x="50" y="120" font-size="20" fill="#7ed321" text-anchor="middle">Other</text>
<path d="M40 40 L50 60 L70 50" fill="none" stroke="#9013fe" stroke-width="5" /> <!-- Checkmark -->
</g>
</svg>
</body>
</html>
```Drag to resize
Here's a complete HTML implementation of a modern, professional illustration of an AI-powered support system using SVG and JavaScript for animation. This creates a dynamic, conceptual visualization with all the requested elements:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Support System Visualization</title>
<style>
body {
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
font-family: 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 90%;
height: 90%;
max-width: 1200px;
}
.ticket {
fill: #FFA726;
stroke: #F57C00;
stroke-width: 1.5;
rx: 4;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.pathway {
stroke-width: 3;
stroke-linecap: round;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.neuron {
fill: none;
stroke: #5C6BC0;
stroke-width: 1.5;
}
.neuron-pulse {
fill: #7986CB;
opacity: 0;
}
.platform-icon {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.jira-logo {
fill: #0052CC;
}
</style>
</head>
<body>
<div class="container">
<svg id="ai-system" viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg">
<!-- Background subtle geometric shapes -->
<rect width="1200" height="675" fill="url(#bgGradient)" />
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f5f7fa" />
<stop offset="100%" stop-color="#e4e8eb" />
</linearGradient>
<pattern id="jiraPattern" patternUnits="userSpaceOnUse" width="20" height="20">
<path d="M10 0L20 10L10 20L0 10Z" fill="#0052CC" opacity="0.6"/>
</pattern>
<!-- Glow filter for brain -->
<filter id="brainGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
</defs>
<!-- Tickets flowing in -->
<g id="incomingTickets">
<rect class="ticket" x="80" y="250" width="80" height="45" rx="4">
<animate attributeName="x" values="80;120;150" dur="2s" begin="0s" repeatCount="indefinite" />
</rect>
<rect class="ticket" x="60" y="300" width="80" height="45" rx="4">
<animate attributeName="x" values="60;100;140" dur="2.2s" begin="0.3s" repeatCount="indefinite" />
</rect>
<rect class="ticket" x="70" y="350" width="80" height="45" rx="4">
<animate attributeName="x" values="70;130;180" dur="2.4s" begin="0.6s" repeatCount="indefinite" />
</rect>
<use href="#jira-icon" x="90" y="265" width="15" height="15"/>
<use href="#jira-icon" x="70" y="315" width="15" height="15"/>
<use href="#jira-icon" x="80" y="365" width="15" height="15"/>
</g>
<!-- AI Brain/Neural Network -->
<g id="aiBrain" transform="translate(400, 300)">
<!-- Main brain shape -->
<path d="M -50,-50 Q 0,-100 50,-50 Q 100,0 50,50 Q 0,100 -50,50 Q -100,0 -50,-50 Z"
fill="#5C6BC0" filter="url(#brainGlow)" opacity="0.9" />
<!-- Neural connections -->
<path class="neuron" d="M -30,-20 Q 0,-40 30,-20" />
<path class="neuron" d="M -30,20 Q 0,40 30,20" />
<path class="neuron" d="M -30,-10 Q 0,0 30,-10" />
<path class="neuron" d="M -20,-30 Q 0,-10 20,-30" />
<path class="neuron" d="M -20,30 Q 0,10 20,30" />
<!-- Pulsing neurons -->
<circle class="neuron-pulse" cx="-30" cy="-20" r="4">
<animate attributeName="opacity" values="0;0.7;0" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle class="neuron-pulse" cx="30" cy="-20" r="4">
<animate attributeName="opacity" values="0;0.7;0" dur="1.8s" repeatCount="indefinite" begin="0.2s"/>
</circle>
</g>
<!-- Processing pathways -->
<g id="processingPathways">
<path id="path1" class="pathway" d="M 500,300 C 600,250 650,200 750,180" stroke="#4DB6AC" />
<path id="path2" class="pathway" d="M 500,300 C 600,320 650,350 750,370" stroke="#7986CB" />
<path id="path3" class="pathway" d="M 500,300 C 600,290 650,270 750,280" stroke="#9575CD" />
<!-- Animated tickets moving along paths -->
<rect id="ticket1" class="ticket" x="500" y="300" width="60" height="35" rx="3">
<animateMotion dur="4s" begin="1s" repeatCount="indefinite">
<mpath xlink:href="#path1"/>
</animateMotion>
</rect>
<rect id="ticket2" class="ticket" x="500" y="300" width="60" height="35" rx="3">
<animateMotion dur="4s" begin="1.5s" repeatCount="indefinite">
<mpath xlink:href="#path2"/>
</animateMotion>
</rect>
<rect id="ticket3" class="ticket" x="500" y="300" width="60" height="35" rx="3">
<animateMotion dur="4s" begin="2s" repeatCount="indefinite">
<mpath xlink:href="#path3"/>
</animateMotion>
</rect>
</g>
<!-- Platforms -->
<g id="gcp" class="platform-icon" transform="translate(750, 170)">
<rect x="-25" y="-25" width="50" height="50" rx="8" fill="white" stroke="#4285F4" stroke-width="2"/>
<path d="M -15,-5 L -5,-5 L -5,5 L -15,5 Z" fill="#34A853"/>
<path d="M 5,-5 L 15,-5 L 15,5 L 5,5 Z" fill="#EA4335"/>
<path d="M -5,-15 L 5,-15 L 5,-5 L -5,-5 Z" fill="#FBBC05"/>
<path d="M -5,5 L 5,5 L 5,15 L -5,15 Z" fill="#4285F4"/>
<circle cx="0" cy="0" r="4" fill="#4285F4"/>
</g>
<g id="legacy" class="platform-icon" transform="translate(750, 370)">
<rect x="-30" y="-20" width="60" height="40" rx="3" fill="white" stroke="#78909C" stroke-width="2"/>
<rect x="-25" y="-15" width="50" height="12" rx="1" fill="#78909C"/>
<rect x="-20" y="0" width="10" height="12" rx="1" fill="#B0BEC5"/>
<rect x="-5" y="0" width="10" height="12" rx="1" fill="#B0BEC5"/>
<rect x="10" y="0" width="10" height="12" rx="1" fill="#B0BEC5"/>
</g>
<!-- Success indicators -->
<g id="success1" transform="translate(750, 180)">
<animateTransform attributeName="transform" type="scale" values="1;1.2;1" dur="2s" repeatCount="indefinite" begin="3s"/>
<path d="M -10,-5 L 0,5 L 15,-10" stroke="#4CAF50" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<g id="success2" transform="translate(750, 280)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite" begin="2s"/>
<circle cx="0" cy="0" r="12" fill="none" stroke="#5C6BC0" stroke-width="2"/>
<path d="M -5,-8 L 5,0 L -5,8" fill="none" stroke="#5C6BC0" stroke-width="2"/>
</g>
<g id="success3" transform="translate(750, 370)">
<animateTransform attributeName="transform" type="scale" values="1;1.2;1" dur="2s" repeatCount="indefinite" begin="3.5s"/>
<path d="M -10,-5 L 0,5 L 15,-10" stroke="#4CAF50" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- Jira icon definition -->
<symbol id="jira-icon" viewBox="0 0 16 16">
<rect width="16" height="16" fill="url(#jiraPattern)"/>
</symbol>
<!-- Labels -->
<text x="150" y="280" font-size="14" fill="#546E7A" text-anchor="middle">Incoming Tickets</text>
<text x="400" y="200" font-size="16" fill="#37474F" font-weight="bold" text-anchor="middle">AI Classification</text>
<text x="750" y="150" font-size="14" fill="#546E7A" text-anchor="middle">GCP Solutions</text>
<text x="750" y="420" font-size="14" fill="#546E7A" text-anchor="middle">Legacy Systems</text>
</svg>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Animate pathways drawing
const pathways = document.querySelectorAll('.pathway');
pathways.forEach((path, index) => {
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
setTimeout(() => {
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
}, 500 * index);
});
// Add random movement to some elements for organic feel
setInterval(() => {
const aiBrain = document.getElementById('aiBrain');
const dx = Math.random() * 4 - 2;
const dy = Math.random() * 2 - 1;
aiBrain.style.transform = `translate(400px, 300px) translate(${dx}px, ${dy}px)`;
}, 3000);
});
</script>
</body>
</html>
```
This implementation features:
- A sleek neural network/brain illustration at the center
- Animated tickets flowing into the system
- Color-coded pathways routing tickets to different platforms
- GCP and legacy system icons with success indicators
- A clean, corporate color scheme with accent colors
- Smooth animations showing the workflow process
- A minimal background with subtle geometric elements
- Aspect ratio of 16:9 as requested
The design is fully self-contained with no external dependencies, using pure SVG and JavaScript for animations.Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>AI-Powered Support System Illustration</title>
<style>
body {
background: linear-gradient(to bottom right, #f7f7f7, #ffffff);
font-family: Arial, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.illustration {
width: 80%;
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.brain-icon {
width: 100px;
height: 100px;
background: radial-gradient(#66ccff, #3399ff);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 24px;
font-weight: bold;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tickets {
display: flex;
justify-content: space-around;
width: 100%;
margin-bottom: 20px;
}
.ticket {
width: 50px;
height: 50px;
background: #ffcc00;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 18px;
font-weight: bold;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.jira-logo {
font-size: 18px;
font-weight: bold;
color: #0052cc;
}
.pathways {
display: flex;
justify-content: space-around;
width: 100%;
}
.pathway {
width: 20%;
height: 20px;
background: #66ccff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 14px;
font-weight: bold;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pathway.demande {
background: #33cc33;
}
.pathway.incident {
background: #ff3333;
}
.platforms {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 20px;
}
.platform {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 24px;
font-weight: bold;
}
.gcp {
background: #4285f4;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.legacy {
background: #666666;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.checkmark {
font-size: 24px;
color: #33cc33;
}
</style>
</head>
<body>
<div class="container">
<div class="illustration">
<div class="tickets">
<div class="ticket"><span class="jira-logo">J</span></div>
<div class="ticket"><span class="jira-logo">J</span></div>
<div class="ticket"><span class="jira-logo">J</span></div>
</div>
<div class="brain-icon">AI</div>
<div class="pathways">
<div class="pathway demande">Demande</div>
<div class="pathway incident">Incident</div>
<div class="pathway">Other</div>
</div>
<div class="platforms">
<div class="platform gcp"><i class="fab fa-google-cloud"></i></div>
<div class="checkmark">✔</div>
<div class="platform legacy"><i class="fas fa-server"></i></div>
<div class="checkmark">✔</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</body>
</html>
```Drag to resize
Here's a self-contained HTML file that renders the requested illustration using SVG and CSS animations. The artwork visualizes an AI-powered support system with a neural network core, document flow, and platform integrations:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI Support System</title>
<style>
body {
margin: 0;
background: linear-gradient(135deg, #f8f9ff, #eef2ff);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Segoe UI', sans-serif;
}
.container {
width: 1280px;
height: 720px;
position: relative;
}
/* Neural Network Brain */
.neuron {
fill: url(#neuronGradient);
filter: url(#glow);
}
.particle {
fill: #40c9ff;
animation: pulse 2s infinite alternate;
}
.particle:nth-child(2n) {
animation-delay: 0.5s;
}
/* Documents & Tickets */
.ticket {
fill: #FFA726;
stroke: #F57C00;
stroke-width: 2;
transform-origin: center;
animation: float 8s infinite ease-in-out;
}
.ticket:nth-child(2) { animation-delay: 1s; }
.ticket:nth-child(3) { animation-delay: 2s; }
.jira-icon {
fill: #2580F8;
}
/* Pathways */
.pathway {
stroke-width: 15;
stroke-linecap: round;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 3s forwards;
}
.path-demande { stroke: #4AD6C9; }
.path-incident { stroke: #6A82FB; }
.path-charge { stroke: #9041F0; }
/* Platform Icons */
.platform-card {
fill: #F8F9FF;
stroke: #E0E7FF;
stroke-width: 3;
rx: 12;
}
.gcp-icon { fill: #4285F4; }
.server-icon { fill: #34A853; }
.checkmark {
stroke: #34A853;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawMark 0.5s 1s forwards;
}
/* Animations */
@keyframes pulse {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@keyframes drawMark {
to { stroke-dashoffset: 0; }
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Glow effect for brain -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.8"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Gradient for neural core -->
<linearGradient id="neuronGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#9041F0" />
<stop offset="100%" stop-color="#6A82FB" />
</linearGradient>
</defs>
<!-- Background elements -->
<rect width="100%" height="100%" fill="url(#gradient)" />
<!-- Neural Network Core -->
<g transform="translate(800, 360)">
<path class="neuron" d="M0,-80 C50,-120 100,-60 80,0 C100,60 50,120 0,80 C-50,120 -100,60 -80,0 C-100,-60 -50,-120 0,-80 Z" />
<!-- Digital particles -->
<circle class="particle" cx="-40" cy="-30" r="8" />
<circle class="particle" cx="20" cy="-50" r="6" />
<circle class="particle" cx="60" cy="10" r="7" />
<circle class="particle" cx="0" cy="50" r="9" />
<circle class="particle" cx="-60" cy="20" r="5" />
</g>
<!-- Incoming Tickets -->
<g class="tickets">
<g transform="translate(200, 300)">
<rect class="ticket" x="0" y="0" width="120" height="80" rx="8" />
<polygon class="ticket" points="100,0 120,0 120,20" fill="#F57C00" />
<path class="jira-icon" d="M30,20 L50,40 L30,60 L10,40 Z" />
</g>
<g transform="translate(150, 450)">
<rect class="ticket" x="0" y="0" width="120" height="80" rx="8" />
<polygon class="ticket" points="100,0 120,0 120,20" fill="#F57C00" />
<path class="jira-icon" d="M30,20 L50,40 L30,60 L10,40 Z" />
</g>
<g transform="translate(250, 200)">
<rect class="ticket" x="0" y="0" width="120" height="80" rx="8" />
<polygon class="ticket" points="100,0 120,0 120,20" fill="#F57C00" />
<path class="jira-icon" d="M30,20 L50,40 L30,60 L10,40 Z" />
</g>
</g>
<!-- Pathways -->
<path id="path1" class="pathway path-demande" d="M800,360 C900,300 1100,250 1200,200" />
<path id="path2" class="pathway path-incident" d="M800,360 C900,400 1100,450 1200,500" />
<path id="path3" class="pathway path-charge" d="M800,360 C700,400 500,450 400,500" />
<!-- Platform Destinations -->
<!-- GCP Destination -->
<g transform="translate(1200, 180)">
<rect class="platform-card" x="-70" y="-60" width="140" height="120" />
<rect class="gcp-icon" x="-45" y="-30" width="20" height="20" />
<rect class="gcp-icon" x="-15" y="-30" width="20" height="20" />
<rect class="gcp-icon" x="15" y="-30" width="20" height="20" />
<rect class="gcp-icon" x="-30" height="20" width="20" />
<rect class="gcp-icon" x="0" height="20" width="20" />
<path class="checkmark" d="M-50,40 L-30,60 L30,20" fill="none" />
</g>
<!-- Server Destination -->
<g transform="translate(1200, 480)">
<rect class="platform-card" x="-70" y="-60" width="140" height="120" />
<rect class="server-icon" x="-50" y="-30" width="100" height="20" />
<rect class="server-icon" x="-50" y="0" width="100" height="20" />
<rect class="server-icon" x="-50" y="30" width="100" height="20" />
<circle class="server-icon" cx="-30" cy="55" r="5" />
<circle class="server-icon" cx="30" cy="55" r="5" />
<path class="checkmark" d="M-50,40 L-30,60 L30,20" fill="none" />
</g>
<!-- Legacy System Destination -->
<g transform="translate(400, 480)">
<rect class="platform-card" x="-70" y="-60" width="140" height="120" />
<rect class="server-icon" x="-30" y="-40" width="60" height="60" />
<rect class="server-icon" x="-20" y="-20" width="40" height="40" fill="#F8F9FF" />
<rect class="server-icon" x="-10" y="15" width="20" height="10" />
<path class="checkmark" d="M-50,40 L-30,60 L30,20" fill="none" />
</g>
<!-- Legend Labels -->
<text x="800" y="100" text-anchor="middle" font-size="36" fill="#2D3748" font-weight="700">AI Support Workflow</text>
<text x="200" y="150" text-anchor="middle" font-size="24" fill="#4A5568">Incoming Tickets</text>
<text x="1200" y="100" text-anchor="middle" font-size="24" fill="#4A5568">GCP Platform</text>
<text x="1200" y="550" text-anchor="middle" font-size="24" fill="#4A5568">Modern Systems</text>
<text x="400" y="550" text-anchor="middle" font-size="24" fill="#4A5568">Legacy Systems</text>
</svg>
</div>
</body>
</html>
```
This illustration features:
1. **Central Neural Network** - Abstract brain icon with glowing digital particles at the center
2. **Incoming Tickets** - Animated Jira-style tickets with folded corners floating toward the AI core
3. **Processing Workflow** - Color-coded pathways routing tickets to different destinations:
- Blue pathway: Demande requests
- Teal pathway: Incident tickets
- Purple pathway: Legacy system tasks
4. **Destination Platforms** - GCP, modern server, and legacy system icons with success checkmarks
5. **Corporate Styling** - Cool blue/purple palette with orange accent on tickets
6. **Animations**:
- Floating documents
- Pulsing neural particles
- Pathway drawing effects
- Success checkmark reveals
The design uses pure SVG and CSS without external dependencies, ensuring it renders perfectly in any modern browser when embedded in an iframe. The aspect ratio is set to 16:9 as requested.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Powered Support System</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: 'Arial', sans-serif;
overflow-x: auto;
}
.container {
width: 100%;
max-width: 1200px;
height: 600px;
margin: 0 auto;
position: relative;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
overflow: hidden;
}
/* Background geometric shapes */
.bg-shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
}
.shape1 { width: 200px; height: 200px; background: #667eea; top: -100px; right: -100px; }
.shape2 { width: 150px; height: 150px; background: #764ba2; bottom: -75px; left: -75px; }
.shape3 { width: 100px; height: 100px; background: #f093fb; top: 50%; left: 10%; }
/* Central AI Brain */
.ai-brain {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
z-index: 10;
}
.brain-core {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
animation: pulse 2s infinite;
}
.neural-network {
position: absolute;
width: 180px;
height: 180px;
top: -30px;
left: -30px;
}
.neural-dot {
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: twinkle 1.5s infinite alternate;
}
.neural-dot:nth-child(1) { top: 20px; left: 50px; animation-delay: 0s; }
.neural-dot:nth-child(2) { top: 40px; right: 30px; animation-delay: 0.3s; }
.neural-dot:nth-child(3) { bottom: 30px; left: 40px; animation-delay: 0.6s; }
.neural-dot:nth-child(4) { bottom: 50px; right: 50px; animation-delay: 0.9s; }
/* Input Tickets */
.ticket {
position: absolute;
width: 60px;
height: 40px;
background: linear-gradient(45deg, #ff9a56, #ffad56);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
animation: moveToCenter 3s infinite;
}
.ticket1 { top: 100px; left: 100px; animation-delay: 0s; }
.ticket2 { top: 200px; left: 80px; animation-delay: 1s; }
.ticket3 { top: 350px; left: 120px; animation-delay: 2s; }
/* Flow Lines */
.flow-line {
position: absolute;
height: 3px;
background: linear-gradient(90deg, transparent, #667eea, transparent);
border-radius: 2px;
opacity: 0.8;
}
.input-flow {
top: 280px;
left: 200px;
width: 200px;
animation: flowRight 2s infinite;
}
/* Output Pathways */
.pathway {
position: absolute;
width: 200px;
height: 3px;
border-radius: 2px;
opacity: 0.8;
animation: flowRight 2s infinite;
}
.pathway-incident {
top: 200px;
left: 650px;
background: linear-gradient(90deg, #667eea, #f093fb);
animation-delay: 0.5s;
}
.pathway-demand {
top: 280px;
left: 650px;
background: linear-gradient(90deg, #667eea, #4facfe);
animation-delay: 1s;
}
.pathway-change {
top: 360px;
left: 650px;
background: linear-gradient(90deg, #667eea, #43e97b);
animation-delay: 1.5s;
}
/* Platform Icons */
.platform {
position: absolute;
width: 80px;
height: 80px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
font-weight: bold;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.gcp {
top: 160px;
right: 100px;
background: linear-gradient(45deg, #4285f4, #34a853);
}
.legacy {
top: 320px;
right: 100px;
background: linear-gradient(45deg, #666, #999);
}
.checkmark {
position: absolute;
top: -10px;
right: -10px;
width: 25px;
height: 25px;
background: #43e97b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
/* Labels */
.label {
position: absolute;
font-size: 12px;
font-weight: bold;
color: #333;
text-align: center;
}
.ai-label { top: 400px; left: 50%; transform: translateX(-50%); color: #667eea; }
.input-label { top: 50px; left: 100px; color: #ff9a56; }
.output-label { top: 50px; right: 100px; color: #667eea; }
/* Animations */
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(102, 126, 234, 0.5); }
50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(102, 126, 234, 0.8); }
}
@keyframes twinkle {
0% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); }
}
@keyframes moveToCenter {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(30px); opacity: 0.7; }
}
@keyframes flowRight {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/* Category Labels */
.category-label {
position: absolute;
font-size: 11px;
font-weight: bold;
padding: 4px 8px;
border-radius: 12px;
color: white;
}
.incident-label { top: 185px; right: 250px; background: #f093fb; }
.demand-label { top: 265px; right: 250px; background: #4facfe; }
.change-label { top: 345px; right: 250px; background: #43e97b; }
</style>
</head>
<body>
<div class="container">
<!-- Background shapes -->
<div class="bg-shape shape1"></div>
<div class="bg-shape shape2"></div>
<div class="bg-shape shape3"></div>
<!-- Input Tickets -->
<div class="ticket ticket1">JIRA</div>
<div class="ticket ticket2">REQ</div>
<div class="ticket ticket3">INC</div>
<!-- Flow Lines -->
<div class="flow-line input-flow"></div>
<!-- Central AI Brain -->
<div class="ai-brain">
<div class="brain-core">
<div style="color: white; font-size: 24px;">🧠</div>
</div>
<div class="neural-network">
<div class="neural-dot"></div>
<div class="neural-dot"></div>
<div class="neural-dot"></div>
<div class="neural-dot"></div>
</div>
</div>
<!-- Output Pathways -->
<div class="pathway pathway-incident"></div>
<div class="pathway pathway-demand"></div>
<div class="pathway pathway-change"></div>
<!-- Category Labels -->
<div class="category-label incident-label">Incident</div>
<div class="category-label demand-label">Demande</div>
<div class="category-label change-label">Change</div>
<!-- Platform Icons -->
<div class="platform gcp">
<div style="font-size: 20px;">☁️</div>
<div>GCP</div>
<div class="checkmark">✓</div>
</div>
<div class="platform legacy">
<div style="font-size: 20px;">🖥️</div>
<div>Legacy</div>
<div class="checkmark">✓</div>
</div>
<!-- Labels -->
<div class="label input-label">Input Tickets</div>
<div class="label ai-label">AI Classification Engine</div>
<div class="label output-label">Automated Resolution</div>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI‑Powered Support System Illustration</title>
<style>
body, html { margin:0; padding:0; width:100%; height:100%; background:#f5f8ff; }
svg { width:100%; height:100%; display:block; }
.brain { fill:none; stroke:#7c4dff; stroke-width:4; }
.ticket { fill:#ff9f43; stroke:#d35400; stroke-width:2; }
.path { fill:none; stroke-width:8; stroke-linecap:round; opacity:0.7; }
.gcp { fill:#4285F4; }
.legacy{ fill:#555555; }
.check { fill:#2ecc71; }
.label { font-family:Arial,Helvetica,sans-serif; font-size:28px; fill:#333; }
</style>
</head>
<body>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet">
<!-- Subtle background gradient -->
<defs>
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e8f0fe"/>
<stop offset="100%" stop-color="#f0f4ff"/>
</linearGradient>
<marker id="arrow" markerWidth="12" markerHeight="12" refX="6" refY="6"
orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,12 L12,6 Z" fill="#555"/>
</marker>
</defs>
<rect width="1600" height="900" fill="url(#bgGrad)"/>
<!-- Central AI Brain (simplified neural network) -->
<g transform="translate(800,450)">
<circle class="brain" r="120"/>
<circle class="brain" r="90"/>
<circle class="brain" r="60"/>
<circle class="brain" r="30"/>
<!-- connecting lines -->
<path class="brain" d="M-120,0 C-80,-80 -40,80 0,0 C40,-80 80,80 120,0"/>
<path class="brain" d="M0,-120 C-80,-80 80,-40 0,0 C80,40 -80,80 0,120"/>
</g>
<!-- Incoming tickets -->
<g id="tickets">
<!-- Ticket 1 -->
<rect class="ticket" x="300" y="250" width="80" height="110" rx="8"/>
<text x="340" y="300" fill="#fff" font-size="16" text-anchor="middle">Jira</text>
<!-- Ticket 2 -->
<rect class="ticket" x="300" y="500" width="80" height="110" rx="8"/>
<text x="340" y="550" fill="#fff" font-size="16" text-anchor="middle">Jira</text>
<!-- Ticket 3 -->
<rect class="ticket" x="300" y="380" width="80" height="110" rx="8"/>
<text x="340" y="430" fill="#fff" font-size="16" text-anchor="middle">Jira</text>
</g>
<!-- Paths from tickets to brain -->
<path class="path" d="M380,305 L560,350 L680,420" stroke="#ff9f43" marker-end="url(#arrow)"/>
<path class="path" d="M380,535 L560,470 L680,420" stroke="#ff9f43" marker-end="url(#arrow)"/>
<path class="path" d="M380,435 L560,410 L680,420" stroke="#ff9f43" marker-end="url(#arrow)"/>
<!-- Outgoing classification pathways -->
<!-- Demande (blue) -->
<path class="path" d="M800,450 L1000,300" stroke="#3498db" marker-end="url(#arrow)"/>
<!-- Incident (purple) -->
<path class="path" d="M800,450 L1000,450" stroke="#9b59b6" marker-end="url(#arrow)"/>
<!-- Other (green) -->
<path class="path" d="M800,450 L1000,600" stroke="#2ecc71" marker-end="url(#arrow)"/>
<!-- Destination icons -->
<!-- GCP (blue cloud) -->
<g transform="translate(1080,260)">
<path class="gcp" d="M0,30 a30,30 0 0 1 60,0 a30,30 0 0 1 -60,0"/>
<text x="30" y="70" fill="#fff" font-size="20" text-anchor="middle">GCP</text>
<circle class="check" cx="30" cy="-10" r="12"/>
<path d="M24,-10 L28,-5 L36,-13" stroke="#fff" stroke-width="3" fill="none"/>
</g>
<!-- Legacy (server rack) -->
<g transform="translate(1080,540)">
<rect class="legacy" x="0" y="0" width="80" height="60" rx="6"/>
<rect class="legacy" x="0" y="70" width="80" height="60" rx="6"/>
<rect class="legacy" x="0" y="140" width="80" height="60" rx="6"/>
<text x="40" y="115" fill="#fff" font-size="18" text-anchor="middle">Legacy</text>
<circle class="check" cx="40" cy="-20" r="12"/>
<path d="M34,-20 L38,-14 L46,-26" stroke="#fff" stroke-width="3" fill="none"/>
</g>
<!-- Labels for pathways -->
<text x="1060" y="300" class="label">Demande</text>
<text x="1060" y="460" class="label">Incident</text>
<text x="1060" y="610" class="label">Other</text>
</svg>
</body>
</html>
```Drag to resize