<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 220" width="900" height="220">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0d1117"/>
<stop offset="100%" style="stop-color:#161b22"/>
</linearGradient>
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#da3633"/>
<stop offset="100%" style="stop-color:#f85149"/>
</linearGradient>
<linearGradient id="scan-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#da3633;stop-opacity:0"/>
<stop offset="50%" style="stop-color:#f85149;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#da3633;stop-opacity:0"/>
</linearGradient>
<linearGradient id="flow-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#238636"/>
<stop offset="50%" style="stop-color:#3fb950"/>
<stop offset="100%" style="stop-color:#238636"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-strong">
<feGaussianBlur stdDeviation="4" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<clipPath id="clip"><rect width="900" height="220" rx="12"/></clipPath>
</defs>
<!-- Background -->
<rect width="900" height="220" rx="12" fill="url(#bg)"/>
<!-- Subtle grid -->
<g stroke="#21262d" stroke-width="0.5" opacity="0.6" clip-path="url(#clip)">
<line x1="0" y1="44" x2="900" y2="44"/>
<line x1="0" y1="88" x2="900" y2="88"/>
<line x1="0" y1="132" x2="900" y2="132"/>
<line x1="0" y1="176" x2="900" y2="176"/>
<line x1="180" y1="0" x2="180" y2="220"/>
<line x1="360" y1="0" x2="360" y2="220"/>
<line x1="540" y1="0" x2="540" y2="220"/>
<line x1="720" y1="0" x2="720" y2="220"/>
</g>
<!-- Animated scan line (red threat detection pulse) -->
<rect x="0" y="0" width="300" height="2" rx="1" fill="url(#scan-grad)" clip-path="url(#clip)">
<animateTransform attributeName="transform" type="translate" from="-300 88" to="1200 88" dur="4s" repeatCount="indefinite"/>
</rect>
<!-- Left side: Shield + CVE icon -->
<g transform="translate(48, 50)" filter="url(#glow)">
<!-- Shield shape -->
<path d="M38 4 L68 16 L68 52 Q68 78 38 92 Q8 78 8 52 L8 16 Z"
fill="#161b22" stroke="#da3633" stroke-width="2" opacity="0.9"/>
<!-- Inner shield glow -->
<path d="M38 12 L62 22 L62 50 Q62 72 38 84 Q14 72 14 50 L14 22 Z"
fill="#da3633" opacity="0.15"/>
<!-- Lock/scan icon in center -->
<g transform="translate(26, 32)">
<!-- Magnifying glass -->
<circle cx="12" cy="12" r="10" fill="none" stroke="#f85149" stroke-width="2.5">
<animate attributeName="stroke-opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/>
</circle>
<line x1="19" y1="19" x2="26" y2="26" stroke="#f85149" stroke-width="2.5" stroke-linecap="round"/>
<!-- Bug/vuln dot -->
<circle cx="12" cy="12" r="3" fill="#f85149">
<animate attributeName="r" values="3;4;3" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0.6;1" dur="1.5s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Checkmark (appears periodically) -->
<g transform="translate(48, 62)" opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0" dur="4s" repeatCount="indefinite"/>
<path d="M0 6 L4 10 L12 0" fill="none" stroke="#3fb950" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
</g>
<!-- Divider -->
<line x1="160" y1="30" x2="160" y2="190" stroke="#30363d" stroke-width="1"/>
<!-- Title -->
<text x="188" y="72" font-family="'SF Mono', 'Fira Code', monospace" font-size="18" fill="#8b949e" letter-spacing="2">@git-fabric/</text>
<text x="188" y="105" font-family="'SF Mono', 'Fira Code', monospace" font-size="42" font-weight="700" fill="#f0f6fc" letter-spacing="-1">cve</text>
<!-- Tagline -->
<text x="190" y="127" font-family="'SF Mono', 'Fira Code', monospace" font-size="13" fill="#8b949e" letter-spacing="0.5">CVE detection-to-remediation fabric app • v0.1.0</text>
<!-- Red accent bar under title -->
<rect x="188" y="135" width="0" height="3" rx="1.5" fill="url(#accent)">
<animate attributeName="width" from="0" to="420" dur="1.2s" fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
</rect>
<!-- Five layer pills -->
<g transform="translate(188, 150)">
<!-- Detection -->
<rect x="0" y="0" width="90" height="24" rx="12" fill="#da3633" opacity="0.2" stroke="#da3633" stroke-width="1"/>
<text x="45" y="16" font-family="'SF Mono', 'Fira Code', monospace" font-size="10" fill="#f85149" text-anchor="middle">Detection</text>
<!-- Intelligence -->
<rect x="98" y="0" width="102" height="24" rx="12" fill="#b08800" opacity="0.2" stroke="#9e6a03" stroke-width="1"/>
<text x="149" y="16" font-family="'SF Mono', 'Fira Code', monospace" font-size="10" fill="#e3b341" text-anchor="middle">Intelligence</text>
<!-- Decision -->
<rect x="208" y="0" width="82" height="24" rx="12" fill="#1f6feb" opacity="0.2" stroke="#1f6feb" stroke-width="1"/>
<text x="249" y="16" font-family="'SF Mono', 'Fira Code', monospace" font-size="10" fill="#58a6ff" text-anchor="middle">Decision</text>
<!-- Action -->
<rect x="298" y="0" width="72" height="24" rx="12" fill="#238636" opacity="0.2" stroke="#238636" stroke-width="1"/>
<text x="334" y="16" font-family="'SF Mono', 'Fira Code', monospace" font-size="10" fill="#3fb950" text-anchor="middle">Action</text>
<!-- State -->
<rect x="378" y="0" width="64" height="24" rx="12" fill="#6e40c9" opacity="0.2" stroke="#6e40c9" stroke-width="1"/>
<text x="410" y="16" font-family="'SF Mono', 'Fira Code', monospace" font-size="10" fill="#bc8cff" text-anchor="middle">State</text>
</g>
<!-- Bottom bar: pipeline flow -->
<rect x="0" y="186" width="900" height="34" rx="0" fill="#161b22" opacity="0.8" clip-path="url(#clip)"/>
<rect x="0" y="186" width="900" height="1" fill="#30363d"/>
<!-- Flow: Scan → Enrich → Triage → Fix → PR -->
<text x="188" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#8b949e">Scan</text>
<!-- Animated flow dot 1 -->
<circle cx="225" cy="203" r="3" fill="#f85149">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
</circle>
<text x="240" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#484f58">→</text>
<text x="260" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#8b949e">Enrich</text>
<circle cx="310" cy="203" r="3" fill="#e3b341">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" begin="0.4s"/>
</circle>
<text x="325" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#484f58">→</text>
<text x="345" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#8b949e">Triage</text>
<circle cx="397" cy="203" r="3" fill="#58a6ff">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" begin="0.8s"/>
</circle>
<text x="412" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#484f58">→</text>
<text x="432" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#8b949e">Fix</text>
<circle cx="462" cy="203" r="3" fill="#3fb950">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" begin="1.2s"/>
</circle>
<text x="477" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#484f58">→</text>
<text x="497" y="207" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#8b949e">PR</text>
<circle cx="522" cy="203" r="3" fill="#bc8cff">
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" begin="1.6s"/>
</circle>
<!-- Corner badge -->
<rect x="818" y="12" width="70" height="22" rx="11" fill="#0d1117" stroke="#da3633" stroke-width="1"/>
<text x="853" y="27" font-family="'SF Mono', 'Fira Code', monospace" font-size="11" fill="#f85149" text-anchor="middle">v0.1.0</text>
</svg>
