mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-02 15:23:19 +08:00
41f990ddd4
- Updated `assembleSkillArgs` function in `resume.md` and `run.md` to sanitize task goal for shell safety by escaping special characters. - Introduced a new animated orbital motion demo in `icon-concepts.html`, showcasing agents orbiting with varying speeds and a breathing core effect.
3923 lines
288 KiB
HTML
3923 lines
288 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>CCW Icon Concepts</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #e0e0e0; padding: 40px; }
|
||
h1 { text-align: center; margin-bottom: 10px; font-size: 28px; }
|
||
.subtitle { text-align: center; color: #888; margin-bottom: 40px; }
|
||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
|
||
.card { background: #141414; border: 1px solid #2a2a2a; border-radius: 16px; padding: 32px; }
|
||
.card h2 { font-size: 18px; margin-bottom: 4px; color: #fff; }
|
||
.card .zh { font-size: 14px; color: #888; margin-bottom: 20px; }
|
||
.card .desc { font-size: 13px; color: #aaa; line-height: 1.6; margin-bottom: 20px; }
|
||
.preview-row { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
|
||
.preview-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||
.preview-box span { font-size: 11px; color: #666; }
|
||
.size-128 { width: 128px; height: 128px; background: #1a1a1a; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
|
||
.size-48 { width: 48px; height: 48px; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
|
||
.size-24 { width: 24px; height: 24px; background: #1a1a1a; border-radius: 4px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
|
||
.size-16 { width: 16px; height: 16px; background: #1a1a1a; border-radius: 2px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
|
||
.ref-row { display: flex; gap: 16px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #2a2a2a; align-items: center; }
|
||
.ref-row .label { font-size: 12px; color: #666; min-width: 80px; }
|
||
.badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||
.badge-rec { background: #22c55e20; color: #22c55e; border: 1px solid #22c55e40; }
|
||
.comparison { max-width: 1200px; margin: 60px auto 0; background: #141414; border: 1px solid #2a2a2a; border-radius: 16px; padding: 32px; }
|
||
.comparison h2 { margin-bottom: 20px; }
|
||
.compare-row { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
|
||
.compare-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||
.compare-item span { font-size: 12px; color: #888; }
|
||
.compare-box { width: 64px; height: 64px; background: #1a1a1a; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
|
||
.divider { width: 1px; height: 50px; background: #333; }
|
||
|
||
/* Light mode toggle */
|
||
.toggle { position: fixed; top: 20px; right: 20px; padding: 8px 16px; background: #333; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; }
|
||
body.light { background: #f5f5f5; color: #333; }
|
||
body.light .card, body.light .comparison { background: #fff; border-color: #e0e0e0; }
|
||
body.light .size-128, body.light .size-48, body.light .size-24, body.light .size-16, body.light .compare-box { background: #f8f8f8; border-color: #ddd; }
|
||
body.light h1 { color: #111; }
|
||
body.light svg { color: #111; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<button class="toggle" onclick="document.body.classList.toggle('light')">Toggle Light/Dark</button>
|
||
|
||
<h1>CCW Icon Design Concepts</h1>
|
||
<p class="subtitle">Claude Code Workflow - Icon Concepts inspired by Claude / OpenAI / Gemini visual language</p>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- Concept A: Conductor's Star -->
|
||
<div class="card">
|
||
<h2>Concept A: Conductor's Star <span class="badge badge-rec">Recommended</span></h2>
|
||
<div class="zh">指挥者之星 — 中心辐射编排</div>
|
||
<div class="desc">
|
||
A central node with 3 dynamic curved lines radiating outward, representing orchestration of multiple AI agents.
|
||
The curves interweave slightly near the center, symbolizing coordination. The central dot echoes the existing CCW status dot.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Central orchestrator dot -->
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<!-- Three radiating orchestration curves -->
|
||
<!-- Top-right curve (Claude direction) -->
|
||
<path d="M13.5 10.5 C16 8, 19 6, 21 4" opacity="0.85"/>
|
||
<!-- Bottom-right curve (OpenAI direction) -->
|
||
<path d="M14 12.5 C17 14, 19 17, 21 20" opacity="0.85"/>
|
||
<!-- Left curve (Gemini direction) -->
|
||
<path d="M10 11.5 C7 10, 5 8, 3 5" opacity="0.85"/>
|
||
<!-- Return flows (lighter) -->
|
||
<path d="M10.5 13.5 C8 16, 5 18, 3 20" opacity="0.45"/>
|
||
<path d="M11 10 C9 7, 7 5, 4 3" opacity="0.25"/>
|
||
<path d="M14 11 C17 10, 19 8, 21 8" opacity="0.25"/>
|
||
<!-- Outer signal dots -->
|
||
<circle cx="21" cy="4" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="20" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="5" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<path d="M13.5 10.5 C16 8, 19 6, 21 4" opacity="0.85"/>
|
||
<path d="M14 12.5 C17 14, 19 17, 21 20" opacity="0.85"/>
|
||
<path d="M10 11.5 C7 10, 5 8, 3 5" opacity="0.85"/>
|
||
<path d="M10.5 13.5 C8 16, 5 18, 3 20" opacity="0.45"/>
|
||
<circle cx="21" cy="4" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="20" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="5" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
<path d="M13.5 10.5 C16 8, 19 6, 21 4"/>
|
||
<path d="M14 12.5 C17 14, 19 17, 21 20"/>
|
||
<path d="M10 11.5 C7 10, 5 8, 3 5"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
|
||
<path d="M14 10 C17 7, 20 5, 22 3"/>
|
||
<path d="M14 13 C17 16, 20 18, 22 21"/>
|
||
<path d="M10 11 C7 9, 4 6, 2 4"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept B: Interwoven Flow -->
|
||
<div class="card">
|
||
<h2>Concept B: Interwoven Flow</h2>
|
||
<div class="zh">交织流程 — 多线交汇协同</div>
|
||
<div class="desc">
|
||
Three lines that cross and interweave at the center, representing different AI agents' task flows converging through CCW.
|
||
The crossing creates a visual "knot" of coordination, echoing OpenAI's interlocking aesthetic.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Three interweaving flow lines -->
|
||
<!-- Line 1: top-left to bottom-right -->
|
||
<path d="M3 6 C7 6, 9 10, 12 12 C15 14, 17 18, 21 18" opacity="0.9"/>
|
||
<!-- Line 2: left to right (through center) -->
|
||
<path d="M3 12 C6 12, 9 14, 12 12 C15 10, 18 12, 21 12" opacity="0.9"/>
|
||
<!-- Line 3: bottom-left to top-right -->
|
||
<path d="M3 18 C7 18, 9 14, 12 12 C15 10, 17 6, 21 6" opacity="0.9"/>
|
||
<!-- Center emphasis dot -->
|
||
<circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.7"/>
|
||
<!-- End dots -->
|
||
<circle cx="3" cy="6" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="3" cy="12" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="3" cy="18" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="21" cy="6" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="21" cy="12" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="21" cy="18" r="1" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||
<path d="M3 6 C7 6, 9 10, 12 12 C15 14, 17 18, 21 18"/>
|
||
<path d="M3 12 C6 12, 9 14, 12 12 C15 10, 18 12, 21 12"/>
|
||
<path d="M3 18 C7 18, 9 14, 12 12 C15 10, 17 6, 21 6"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M3 6 C7 6, 9 10, 12 12 C15 14, 17 18, 21 18"/>
|
||
<path d="M3 12 C6 12, 9 14, 12 12 C15 10, 18 12, 21 12"/>
|
||
<path d="M3 18 C7 18, 9 14, 12 12 C15 10, 17 6, 21 6"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<path d="M3 6 C7 6, 9 10, 12 12 C15 14, 17 18, 21 18"/>
|
||
<path d="M3 18 C7 18, 9 14, 12 12 C15 10, 17 6, 21 6"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept C: Circuit Hub -->
|
||
<div class="card">
|
||
<h2>Concept C: Circuit Hub</h2>
|
||
<div class="zh">枢纽节点 — 中心连接架构</div>
|
||
<div class="desc">
|
||
A hexagonal center node with connection lines extending to surrounding endpoint nodes.
|
||
Clean, structural, tech-focused. Emphasizes CCW as the central hub connecting multiple AI tools.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Central hexagon -->
|
||
<path d="M12 8 L15.5 10 L15.5 14 L12 16 L8.5 14 L8.5 10 Z" fill="currentColor" fill-opacity="0.08" stroke-width="1.5"/>
|
||
<!-- Connection lines -->
|
||
<line x1="12" y1="8" x2="12" y2="3" opacity="0.7"/>
|
||
<line x1="15.5" y1="10" x2="20" y2="6" opacity="0.7"/>
|
||
<line x1="15.5" y1="14" x2="20" y2="18" opacity="0.7"/>
|
||
<line x1="12" y1="16" x2="12" y2="21" opacity="0.7"/>
|
||
<line x1="8.5" y1="14" x2="4" y2="18" opacity="0.7"/>
|
||
<line x1="8.5" y1="10" x2="4" y2="6" opacity="0.7"/>
|
||
<!-- Endpoint nodes -->
|
||
<circle cx="12" cy="3" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="6" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="18" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="12" cy="21" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<!-- Center dot -->
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 8 L15.5 10 L15.5 14 L12 16 L8.5 14 L8.5 10 Z" fill="currentColor" fill-opacity="0.08"/>
|
||
<line x1="12" y1="8" x2="12" y2="3"/>
|
||
<line x1="15.5" y1="10" x2="20" y2="6"/>
|
||
<line x1="15.5" y1="14" x2="20" y2="18"/>
|
||
<line x1="12" y1="16" x2="12" y2="21"/>
|
||
<line x1="8.5" y1="14" x2="4" y2="18"/>
|
||
<line x1="8.5" y1="10" x2="4" y2="6"/>
|
||
<circle cx="12" cy="3" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="6" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="18" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="12" cy="21" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 8 L15.5 10 L15.5 14 L12 16 L8.5 14 L8.5 10 Z" fill="currentColor" fill-opacity="0.1"/>
|
||
<line x1="12" y1="8" x2="12" y2="3"/>
|
||
<line x1="15.5" y1="14" x2="20" y2="18"/>
|
||
<line x1="8.5" y1="14" x2="4" y2="18"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 8 L16 10 L16 14 L12 16 L8 14 L8 10 Z" fill="currentColor" fill-opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept D: Orbital Flow -->
|
||
<div class="card">
|
||
<h2>Concept D: Orbital Flow</h2>
|
||
<div class="zh">轨道流转 — 动态环绕编排</div>
|
||
<div class="desc">
|
||
Three orbital arcs around a central point, each representing an AI agent in motion.
|
||
The open arcs suggest continuous workflow cycles. Inspired by atomic orbital models and Gemini's star aesthetics.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round">
|
||
<!-- Central core -->
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<!-- Orbit 1 (horizontal ellipse) -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<!-- Orbit 2 (tilted 60°) -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<!-- Orbit 3 (tilted -60°) -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<!-- Agent dots on orbits -->
|
||
<circle cx="17" cy="10.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<circle cx="17" cy="10.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept E: Triple Helix -->
|
||
<div class="card">
|
||
<h2>Concept E: Triple Helix</h2>
|
||
<div class="zh">三螺旋 — DNA 式三体协同</div>
|
||
<div class="desc">
|
||
Three sinusoidal strands twisting around a vertical axis like a triple-helix DNA.
|
||
Each strand represents an AI agent (Claude / OpenAI / Gemini) woven into a unified workflow.
|
||
Conveys deep integration and organic collaboration.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
||
<!-- Strand 1 -->
|
||
<path d="M8 2 C15 5, 9 9, 16 12 C9 15, 15 19, 8 22" opacity="0.85"/>
|
||
<!-- Strand 2 -->
|
||
<path d="M12 2 C19 5, 5 9, 12 12 C5 15, 19 19, 12 22" opacity="0.6"/>
|
||
<!-- Strand 3 -->
|
||
<path d="M16 2 C9 5, 15 9, 8 12 C15 15, 9 19, 16 22" opacity="0.4"/>
|
||
<!-- Cross-link nodes -->
|
||
<circle cx="12" cy="5" r="1.2" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.8"/>
|
||
<circle cx="12" cy="19" r="1.2" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||
<path d="M8 2 C15 5, 9 9, 16 12 C9 15, 15 19, 8 22" opacity="0.85"/>
|
||
<path d="M12 2 C19 5, 5 9, 12 12 C5 15, 19 19, 12 22" opacity="0.6"/>
|
||
<path d="M16 2 C9 5, 15 9, 8 12 C15 15, 9 19, 16 22" opacity="0.4"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M8 2 C15 5, 9 9, 16 12 C9 15, 15 19, 8 22"/>
|
||
<path d="M16 2 C9 5, 15 9, 8 12 C15 15, 9 19, 16 22" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<path d="M8 2 C16 6, 8 10, 16 14 C8 18, 16 22, 8 22"/>
|
||
<path d="M16 2 C8 6, 16 10, 8 14 C16 18, 8 22, 16 22" opacity="0.45"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept F: Command Chevron -->
|
||
<div class="card">
|
||
<h2>Concept F: Command Chevron</h2>
|
||
<div class="zh">命令箭头 — 层叠推进流程</div>
|
||
<div class="desc">
|
||
Layered chevron arrows converging forward, evoking CLI command execution and workflow pipeline progression.
|
||
The stacked layers represent multi-stage orchestration. A terminal/command aesthetic that fits CCW's CLI nature.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Three layered chevrons -->
|
||
<polyline points="4,6 12,12 4,18" opacity="0.3"/>
|
||
<polyline points="8,6 16,12 8,18" opacity="0.6"/>
|
||
<polyline points="12,6 20,12 12,18" opacity="0.9"/>
|
||
<!-- Forward dot (execution point) -->
|
||
<circle cx="20" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.8"/>
|
||
<!-- Trailing dots -->
|
||
<circle cx="4" cy="6" r="0.8" fill="currentColor" stroke="none" opacity="0.2"/>
|
||
<circle cx="4" cy="18" r="0.8" fill="currentColor" stroke="none" opacity="0.2"/>
|
||
<circle cx="8" cy="6" r="0.8" fill="currentColor" stroke="none" opacity="0.35"/>
|
||
<circle cx="8" cy="18" r="0.8" fill="currentColor" stroke="none" opacity="0.35"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="4,6 12,12 4,18" opacity="0.3"/>
|
||
<polyline points="8,6 16,12 8,18" opacity="0.6"/>
|
||
<polyline points="12,6 20,12 12,18" opacity="0.9"/>
|
||
<circle cx="20" cy="12" r="1.8" fill="currentColor" stroke="none" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="5,6 13,12 5,18" opacity="0.4"/>
|
||
<polyline points="10,6 18,12 10,18" opacity="0.9"/>
|
||
<circle cx="19" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="5,6 13,12 5,18" opacity="0.35"/>
|
||
<polyline points="10,6 18,12 10,18"/>
|
||
<circle cx="19.5" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept G: Trident Propeller -->
|
||
<div class="card">
|
||
<h2>Concept G: Trident Propeller</h2>
|
||
<div class="zh">三叶旋翼 — 动态驱动协调</div>
|
||
<div class="desc">
|
||
Three curved blades rotating around a central hub, like a turbine or propeller.
|
||
Conveys active energy, continuous motion and coordination power.
|
||
The 120-degree symmetry echoes the three AI providers while suggesting rotational workflow cycles.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Central hub -->
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none" opacity="0.85"/>
|
||
<!-- Blade 1 (top) -->
|
||
<path d="M12 9.5 C10 7, 8 4, 6 2" stroke-width="2" opacity="0.85"/>
|
||
<path d="M12 9.5 C14.5 8.5, 16 6, 15 3" stroke-width="1" opacity="0.3"/>
|
||
<!-- Blade 2 (bottom-right) -->
|
||
<path d="M13.8 13.2 C16 14, 19 15, 21 17" stroke-width="2" opacity="0.85"/>
|
||
<path d="M13.8 13.2 C14.5 15.5, 14 18, 17 20" stroke-width="1" opacity="0.3"/>
|
||
<!-- Blade 3 (bottom-left) -->
|
||
<path d="M10.2 13.2 C8 14, 5 15, 3 17" stroke-width="2" opacity="0.85"/>
|
||
<path d="M10.2 13.2 C9.5 15.5, 10 18, 7 20" stroke-width="1" opacity="0.3"/>
|
||
<!-- Blade tips -->
|
||
<circle cx="6" cy="2" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="17" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="17" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/>
|
||
<path d="M12 9.5 C10 7, 8 4, 6 2" stroke-width="2"/>
|
||
<path d="M13.8 13.2 C16 14, 19 15, 21 17" stroke-width="2"/>
|
||
<path d="M10.2 13.2 C8 14, 5 15, 3 17" stroke-width="2"/>
|
||
<circle cx="6" cy="2" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="17" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="17" r="1" fill="currentColor" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
<path d="M12 9 C10 6, 7 3, 5 1"/>
|
||
<path d="M14 13.5 C17 15, 20 16, 22 18"/>
|
||
<path d="M10 13.5 C7 15, 4 16, 2 18"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
|
||
<path d="M12 8.5 C10 5, 7 2, 5 1"/>
|
||
<path d="M14.5 13.5 C17 16, 20 18, 22 19"/>
|
||
<path d="M9.5 13.5 C7 16, 4 18, 2 19"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Concept H: Signal Beacon -->
|
||
<div class="card">
|
||
<h2>Concept H: Signal Beacon</h2>
|
||
<div class="zh">信号灯塔 — 广播协调中枢</div>
|
||
<div class="desc">
|
||
A central beacon emitting concentric signal arcs, like a broadcast tower or radar.
|
||
Represents CCW as the command center broadcasting orchestration signals to all connected agents.
|
||
Clean, symmetric, and highly recognizable at small sizes.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
||
<!-- Central beacon -->
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<!-- Signal arcs (concentric, partial) -->
|
||
<!-- Inner ring -->
|
||
<path d="M7.5 7.5 A6.5 6.5 0 0 1 16.5 7.5" opacity="0.7"/>
|
||
<path d="M16.5 16.5 A6.5 6.5 0 0 1 7.5 16.5" opacity="0.7"/>
|
||
<!-- Outer ring -->
|
||
<path d="M4.5 4.5 A10.5 10.5 0 0 1 19.5 4.5" opacity="0.4"/>
|
||
<path d="M19.5 19.5 A10.5 10.5 0 0 1 4.5 19.5" opacity="0.4"/>
|
||
<!-- Side signal arcs -->
|
||
<path d="M7.5 16.5 A6.5 6.5 0 0 1 7.5 7.5" opacity="0.5"/>
|
||
<path d="M16.5 7.5 A6.5 6.5 0 0 1 16.5 16.5" opacity="0.5"/>
|
||
<!-- Directional dots -->
|
||
<circle cx="12" cy="4" r="0.8" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="12" cy="20" r="0.8" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="4" cy="12" r="0.8" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
<circle cx="20" cy="12" r="0.8" fill="currentColor" stroke="none" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
<path d="M7.5 7.5 A6.5 6.5 0 0 1 16.5 7.5" opacity="0.7"/>
|
||
<path d="M16.5 16.5 A6.5 6.5 0 0 1 7.5 16.5" opacity="0.7"/>
|
||
<path d="M4.5 4.5 A10.5 10.5 0 0 1 19.5 4.5" opacity="0.35"/>
|
||
<path d="M19.5 19.5 A10.5 10.5 0 0 1 4.5 19.5" opacity="0.35"/>
|
||
<path d="M7.5 16.5 A6.5 6.5 0 0 1 7.5 7.5" opacity="0.5"/>
|
||
<path d="M16.5 7.5 A6.5 6.5 0 0 1 16.5 16.5" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.8" fill="currentColor" stroke="none"/>
|
||
<path d="M7 7 A7 7 0 0 1 17 7" opacity="0.7"/>
|
||
<path d="M17 17 A7 7 0 0 1 7 17" opacity="0.7"/>
|
||
<path d="M7 17 A7 7 0 0 1 7 7" opacity="0.45"/>
|
||
<path d="M17 7 A7 7 0 0 1 17 17" opacity="0.45"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
|
||
<path d="M7 7 A7 7 0 0 1 17 7"/>
|
||
<path d="M17 17 A7 7 0 0 1 7 17"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ========== Concept D Optimized Variants ========== -->
|
||
</div>
|
||
|
||
<h1 style="margin-top:60px;">Concept D — Optimized Variants</h1>
|
||
<p class="subtitle">Based on Gemini analysis: color strategy, detail refinements, size-adaptive design</p>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- D1: Vibrant Flow -->
|
||
<div class="card">
|
||
<h2>D1: Vibrant Flow <span class="badge badge-rec">Recommended</span></h2>
|
||
<div class="zh">活力流转 — CCW 蓝轨道 + AI 彩色节点</div>
|
||
<div class="desc">
|
||
Unified CCW brand blue (#3B82F6) orbits with AI-colored agent dots:
|
||
Claude #D97757, OpenAI #10A37F, Gemini #4285F4.
|
||
Dashed lines replaced with low-opacity solid arcs. Core has a soft glow ring.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<!-- Core glow ring -->
|
||
<circle cx="12" cy="12" r="3.5" fill="none" stroke="#3B82F6" stroke-width="0.4" opacity="0.2"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.2" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1" fill="#93C5FD" stroke="none" opacity="0.6"/>
|
||
<!-- Orbit 1 (horizontal) -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.4" opacity="0.2"/>
|
||
<!-- Orbit 2 (tilted 60°) -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.2"/>
|
||
<!-- Orbit 3 (tilted -60°) -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.2"/>
|
||
<!-- Agent dots with white stroke -->
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1" fill="#93C5FD" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.5" opacity="0.18"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.18"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.18"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="white" stroke-width="0.3"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="white" stroke-width="0.3"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="white" stroke-width="0.3"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.8"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.8"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.8"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" stroke="none"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#3B82F6" stroke-width="2.2"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#3B82F6" stroke-width="2.2"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#3B82F6" stroke-width="2.2"/>
|
||
<circle cx="17" cy="10" r="1.8" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2: Synergistic Coexistence -->
|
||
<div class="card">
|
||
<h2>D2: Synergistic Coexistence</h2>
|
||
<div class="zh">协同共生 — 三色轨道 + 品牌蓝核心</div>
|
||
<div class="desc">
|
||
Each orbit takes the color of an AI provider: Claude #D97757, OpenAI #10A37F, Gemini #4285F4.
|
||
Center core is CCW brand blue with a bright inner highlight.
|
||
Agent dots match their orbit colors with increased size.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" stroke="none" opacity="0.5"/>
|
||
<!-- Orbit 1 - Claude orange -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.4" opacity="0.18"/>
|
||
<!-- Orbit 2 - OpenAI green -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" opacity="0.18"/>
|
||
<!-- Orbit 3 - Gemini blue -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" opacity="0.18"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" stroke="none" opacity="0.4"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.5" opacity="0.15"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.5" opacity="0.15"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.5" opacity="0.15"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="#3B82F6" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.8"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.8"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.8"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" stroke="none"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="2.2"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2.2"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2.2"/>
|
||
<circle cx="17" cy="10" r="2" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="2" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5" r="2" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D3: Convergent Energy -->
|
||
<div class="card">
|
||
<h2>D3: Convergent Energy</h2>
|
||
<div class="zh">聚合能量 — 渐变轨道 + 光晕粒子</div>
|
||
<div class="desc">
|
||
Gradient orbits transitioning from CCW blue to cyan.
|
||
Radial gradient core simulating an energy center.
|
||
Agent dots as white glowing particles with soft halos. Futuristic, abstract energy aesthetic.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="coreGd1" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="white"/>
|
||
<stop offset="50%" stop-color="#60A5FA"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</radialGradient>
|
||
<linearGradient id="orbGd1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#3B82F6"/>
|
||
<stop offset="60%" stop-color="#67E8F9"/>
|
||
<stop offset="100%" stop-color="#3B82F6" stop-opacity="0.3"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Core pulse rings -->
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#3B82F6" stroke-width="0.3" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.25"/>
|
||
<!-- Core gradient -->
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#coreGd1)" stroke="none"/>
|
||
<!-- Orbit 1 -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#orbGd1)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.2" opacity="0.12"/>
|
||
<!-- Orbit 2 -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#orbGd1)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.12"/>
|
||
<!-- Orbit 3 -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#orbGd1)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.12"/>
|
||
<!-- Agent particles with glow halos -->
|
||
<circle cx="17" cy="10.5" r="2.2" fill="#67E8F9" stroke="none" opacity="0.15"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.9"/>
|
||
<circle cx="8" cy="16" r="2.2" fill="#67E8F9" stroke="none" opacity="0.15"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.9"/>
|
||
<circle cx="14" cy="5.5" r="2.2" fill="#67E8F9" stroke="none" opacity="0.15"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="coreGd2" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="white"/>
|
||
<stop offset="50%" stop-color="#60A5FA"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</radialGradient>
|
||
<linearGradient id="orbGd2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#3B82F6"/>
|
||
<stop offset="60%" stop-color="#67E8F9"/>
|
||
<stop offset="100%" stop-color="#3B82F6" stop-opacity="0.3"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.2"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#coreGd2)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#orbGd2)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#orbGd2)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#orbGd2)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="coreGd3" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="white"/>
|
||
<stop offset="60%" stop-color="#60A5FA"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#coreGd3)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.8"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.8"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.8"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#2563EB" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" stroke="none" opacity="0.4"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#60A5FA" stroke-width="2.2"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#60A5FA" stroke-width="2.2"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#60A5FA" stroke-width="2.2"/>
|
||
<circle cx="17" cy="10" r="1.8" fill="white" stroke="none" opacity="0.8"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="white" stroke="none" opacity="0.8"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="white" stroke="none" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D-Original for comparison -->
|
||
<div class="card">
|
||
<h2>D-Original (Before)</h2>
|
||
<div class="zh">原始版本 — 对比参考</div>
|
||
<div class="desc">
|
||
Original monochrome Concept D with currentColor strokes, dashed back-arcs, and plain agent dots.
|
||
Provided here for direct visual comparison with the optimized variants.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<circle cx="17" cy="10.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<circle cx="17" cy="10.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- D Variants Comparison -->
|
||
<div class="comparison">
|
||
<h2>Concept D Variants — Side-by-side at 64px</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none" opacity="0.9"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<circle cx="17" cy="10.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="currentColor" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>D-Original</span>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1" fill="#93C5FD" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.5" opacity="0.18"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.85"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="white" stroke-width="0.3"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="white" stroke-width="0.3"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="white" stroke-width="0.3"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">D1 Vibrant</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" stroke="none" opacity="0.4"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.5" opacity="0.15"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.5" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">D2 Synergy</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6; background: #0f172a;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="coreGd4" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="white"/>
|
||
<stop offset="50%" stop-color="#60A5FA"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</radialGradient>
|
||
<linearGradient id="orbGd4" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#3B82F6"/>
|
||
<stop offset="60%" stop-color="#67E8F9"/>
|
||
<stop offset="100%" stop-color="#3B82F6" stop-opacity="0.3"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.2"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#coreGd4)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#orbGd4)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#orbGd4)" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#orbGd4)" stroke-width="1.5" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #60A5FA;">D3 Energy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== D2 Optimized Variants ========== -->
|
||
</div>
|
||
|
||
<h1 style="margin-top:60px;">D2 — Four Optimization Directions</h1>
|
||
<p class="subtitle">Neon Wire / Solid Bands / Gradient Fusion / Minimal Accent</p>
|
||
|
||
<div class="grid" style="grid-template-columns: 1fr 1fr;">
|
||
|
||
<!-- D2-A: Neon Wire -->
|
||
<div class="card">
|
||
<h2>D2-A: Neon Wire</h2>
|
||
<div class="zh">霓虹光轨 — 赛博朋克发光线条</div>
|
||
<div class="desc">Ultra-thin luminous orbits with strong glow on dark background. Core as a bright white point source. Agent dots as tiny sparks. Tron/cyberpunk aesthetic.</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0a0e1a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="nw-gc" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||
<filter id="nw-g1" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="0.8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||
</defs>
|
||
<!-- Core glow -->
|
||
<circle cx="12" cy="12" r="1.2" fill="white" filter="url(#nw-gc)"/>
|
||
<!-- Orbit 1 - Claude neon -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="0.7" filter="url(#nw-g1)"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="0.5" opacity="0.2"/>
|
||
<!-- Orbit 2 - OpenAI neon -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="0.7" filter="url(#nw-g1)"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="0.5" opacity="0.2"/>
|
||
<!-- Orbit 3 - Gemini neon -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="0.7" filter="url(#nw-g1)"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="0.5" opacity="0.2"/>
|
||
<!-- Agent sparks -->
|
||
<circle cx="17" cy="10.5" r="0.9" fill="#D97757" filter="url(#nw-g1)"/>
|
||
<circle cx="8" cy="16" r="0.9" fill="#10A37F" filter="url(#nw-g1)"/>
|
||
<circle cx="14" cy="5.5" r="0.9" fill="#4285F4" filter="url(#nw-g1)"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px Dark</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48" style="background:#0a0e1a;">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="nw2-gc" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||
<filter id="nw2-g1" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="0.8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" filter="url(#nw2-gc)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="0.8" filter="url(#nw2-g1)"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="0.8" filter="url(#nw2-g1)"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="0.8" filter="url(#nw2-g1)"/>
|
||
<circle cx="17" cy="10.5" r="1" fill="#D97757" filter="url(#nw2-g1)"/>
|
||
<circle cx="8" cy="16" r="1" fill="#10A37F" filter="url(#nw2-g1)"/>
|
||
<circle cx="14" cy="5.5" r="1" fill="#4285F4" filter="url(#nw2-g1)"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24" style="background:#0a0e1a;"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round"><circle cx="12" cy="12" r="1.5" fill="white"/><path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.2"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.2"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.2"/><circle cx="17" cy="10.5" r="1.2" fill="#D97757"/><circle cx="8" cy="16" r="1.2" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.2" fill="#4285F4"/></svg></div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16" style="background:#0a0e1a;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round"><circle cx="12" cy="12" r="2" fill="white"/><path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="1.8"/><path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="1.8"/><path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="1.8"/><circle cx="17" cy="10" r="1.5" fill="#D97757"/><circle cx="8" cy="16" r="1.5" fill="#10A37F"/><circle cx="14" cy="5" r="1.5" fill="#4285F4"/></svg></div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-B: Solid Bands -->
|
||
<div class="card">
|
||
<h2>D2-B: Solid Bands</h2>
|
||
<div class="zh">实体交错 — 厚重互锁结构</div>
|
||
<div class="desc">Thick opaque orbit bands with clear over/under layering at crossings. Core as a solid weighted sphere with 3D gradient. Mechanical precision, like OpenAI's interlocking knot.</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="sb-core" cx="40%" cy="35%" r="55%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="40%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></radialGradient>
|
||
</defs>
|
||
<!-- Back arcs (under everything) -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="2.2" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="2.2" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="2.2" opacity="0.15"/>
|
||
<!-- Orbit 3 bottom layer - Gemini -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="2.2"/>
|
||
<!-- Orbit 2 middle layer - OpenAI -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="2.2"/>
|
||
<!-- Orbit 1 top layer - Claude -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="2.2"/>
|
||
<!-- Core sphere -->
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#sb-core)" stroke="none"/>
|
||
<circle cx="11" cy="11" r="0.6" fill="white" stroke="none" opacity="0.4"/>
|
||
<!-- Agent dots - inset style -->
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="#10A37F" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="#4285F4" stroke="white" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="sb2-core" cx="40%" cy="35%" r="55%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="40%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></radialGradient></defs>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="2.4"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="2.4"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="2.4"/>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#sb2-core)" stroke="none"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="#10A37F" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="#4285F4" stroke="white" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round"><defs><radialGradient id="sb3-core" cx="40%" cy="35%" r="55%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="40%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></radialGradient></defs><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="2.8"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="2.8"/><path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="2.8"/><circle cx="12" cy="12" r="2.8" fill="url(#sb3-core)" stroke="none"/><circle cx="17" cy="10.5" r="1.5" fill="#D97757"/><circle cx="8" cy="16" r="1.5" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4"/></svg></div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round"><path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="3.2"/><path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="3.2"/><path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="3.2"/><circle cx="12" cy="12" r="3" fill="#3B82F6" stroke="none"/><circle cx="17" cy="10" r="2" fill="#D97757"/><circle cx="8" cy="16" r="2" fill="#10A37F"/><circle cx="14" cy="5" r="2" fill="#4285F4"/></svg></div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-C: Gradient Fusion -->
|
||
<div class="card">
|
||
<h2>D2-C: Gradient Fusion</h2>
|
||
<div class="zh">渐变融合 — 三色柔和交汇</div>
|
||
<div class="desc">Orbits blend colors smoothly via gradients. Core is a tri-color radial gradient merging all 3 AI colors into one. Agent dots have soft inner glow. Organic, fluid, unified feel.</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="gf-core"><stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="35%" stop-color="#D97757"/><stop offset="65%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></radialGradient>
|
||
<linearGradient id="gf-o1" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#D97757"/><stop offset="100%" stop-color="#10A37F"/></linearGradient>
|
||
<linearGradient id="gf-o2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></linearGradient>
|
||
<linearGradient id="gf-o3" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#4285F4"/><stop offset="100%" stop-color="#D97757"/></linearGradient>
|
||
</defs>
|
||
<!-- Orbit back arcs -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="url(#gf-o1)" stroke-width="1.8" opacity="0.12"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="url(#gf-o2)" stroke-width="1.8" opacity="0.12"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="url(#gf-o3)" stroke-width="1.8" opacity="0.12"/>
|
||
<!-- Orbit front arcs with gradient -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#gf-o1)" stroke-width="1.8" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#gf-o2)" stroke-width="1.8" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#gf-o3)" stroke-width="1.8" opacity="0.85"/>
|
||
<!-- Tri-color core -->
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#gf-core)" stroke="none"/>
|
||
<!-- Agent dots with soft inner glow -->
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="none" opacity="0.85"/>
|
||
<circle cx="17" cy="10.5" r="0.6" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="0.6" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="0.6" fill="white" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="gf2-core"><stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="35%" stop-color="#D97757"/><stop offset="65%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></radialGradient>
|
||
<linearGradient id="gf2-o1" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#D97757"/><stop offset="100%" stop-color="#10A37F"/></linearGradient>
|
||
<linearGradient id="gf2-o2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></linearGradient>
|
||
<linearGradient id="gf2-o3" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#4285F4"/><stop offset="100%" stop-color="#D97757"/></linearGradient>
|
||
</defs>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#gf2-o1)" stroke-width="2" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#gf2-o2)" stroke-width="2" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#gf2-o3)" stroke-width="2" opacity="0.85"/>
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#gf2-core)" stroke="none"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round"><defs><radialGradient id="gf3-core"><stop offset="0%" stop-color="white"/><stop offset="35%" stop-color="#D97757"/><stop offset="65%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></radialGradient><linearGradient id="gf3-o1" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#D97757"/><stop offset="100%" stop-color="#10A37F"/></linearGradient><linearGradient id="gf3-o2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></linearGradient><linearGradient id="gf3-o3" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#4285F4"/><stop offset="100%" stop-color="#D97757"/></linearGradient></defs><path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#gf3-o1)" stroke-width="2.2"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#gf3-o2)" stroke-width="2.2"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#gf3-o3)" stroke-width="2.2"/><circle cx="12" cy="12" r="2.8" fill="url(#gf3-core)" stroke="none"/><circle cx="17" cy="10.5" r="1.5" fill="#D97757"/><circle cx="8" cy="16" r="1.5" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4"/></svg></div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round"><defs><radialGradient id="gf4-core"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#D97757"/><stop offset="70%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></radialGradient></defs><path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="2.8"/><path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2.8"/><path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2.8"/><circle cx="12" cy="12" r="3.2" fill="url(#gf4-core)" stroke="none"/><circle cx="17" cy="10" r="2" fill="#D97757"/><circle cx="8" cy="16" r="2" fill="#10A37F"/><circle cx="14" cy="5" r="2" fill="#4285F4"/></svg></div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-D: Minimal Accent -->
|
||
<div class="card">
|
||
<h2>D2-D: Minimal Accent</h2>
|
||
<div class="zh">极简点缀 — Apple 风格克制用色</div>
|
||
<div class="desc">Mostly white/neutral orbits with tiny colored segments only near agent dots. Core is a clean white dot. Restrained, refined, Apple-like minimalism. Color as precise punctuation.</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<!-- Full orbit arcs - neutral -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="white" stroke-width="1" opacity="0.2"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="white" stroke-width="1" opacity="0.06"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="white" stroke-width="1" opacity="0.2"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="white" stroke-width="1" opacity="0.06"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="white" stroke-width="1" opacity="0.2"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="white" stroke-width="1" opacity="0.06"/>
|
||
<!-- Color accent segments near dots -->
|
||
<path d="M15 11.2 A8 3 0 0 1 19 11.7" stroke="#D97757" stroke-width="1.2" opacity="0.9"/>
|
||
<path d="M9.5 15 A8 3 30 0 1 7.5 17" stroke="#10A37F" stroke-width="1.2" opacity="0.9"/>
|
||
<path d="M15 5.8 A8 3 -30 0 1 13 4.8" stroke="#4285F4" stroke-width="1.2" opacity="0.9"/>
|
||
<!-- Core - clean white -->
|
||
<circle cx="12" cy="12" r="1.5" fill="white" stroke="none" opacity="0.9"/>
|
||
<!-- Agent dots - solid color -->
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="white" stroke-width="1.2" opacity="0.2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="white" stroke-width="1.2" opacity="0.2"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="white" stroke-width="1.2" opacity="0.2"/>
|
||
<path d="M15 11.2 A8 3 0 0 1 19 11.7" stroke="#D97757" stroke-width="1.5"/>
|
||
<path d="M9.5 15 A8 3 30 0 1 7.5 17" stroke="#10A37F" stroke-width="1.5"/>
|
||
<path d="M15 5.8 A8 3 -30 0 1 13 4.8" stroke="#4285F4" stroke-width="1.5"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" stroke="none" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="#10A37F" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="#4285F4" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round"><path d="M4 12 A8 3 0 0 1 20 12" stroke="white" stroke-width="1.5" opacity="0.18"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="white" stroke-width="1.5" opacity="0.18"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="white" stroke-width="1.5" opacity="0.18"/><circle cx="12" cy="12" r="1.8" fill="white" stroke="none"/><circle cx="17" cy="10.5" r="1.5" fill="#D97757"/><circle cx="8" cy="16" r="1.5" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4"/></svg></div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16" style="background:#0f172a;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round"><path d="M5 12 A7 2.5 0 0 1 19 12" stroke="white" stroke-width="2" opacity="0.15"/><path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="white" stroke-width="2" opacity="0.15"/><path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="white" stroke-width="2" opacity="0.15"/><circle cx="12" cy="12" r="2" fill="white"/><circle cx="17" cy="10" r="2" fill="#D97757"/><circle cx="8" cy="16" r="2" fill="#10A37F"/><circle cx="14" cy="5" r="2" fill="#4285F4"/></svg></div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- D2 Variants Comparison -->
|
||
<div class="comparison">
|
||
<h2>D2 Variants — 64px Side-by-side</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#1e293b;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6"/><circle cx="12" cy="12" r="1.2" fill="white" opacity="0.4"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.5" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757"/><circle cx="8" cy="16" r="1.8" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.8" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>D2 Original</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0a0e1a; border-color:#D97757;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><filter id="cmp-nw1" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="cmp-nw2" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="0.7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" filter="url(#cmp-nw1)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="0.8" filter="url(#cmp-nw2)"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="0.8" filter="url(#cmp-nw2)"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="0.8" filter="url(#cmp-nw2)"/>
|
||
<circle cx="17" cy="10.5" r="1" fill="#D97757" filter="url(#cmp-nw2)"/><circle cx="8" cy="16" r="1" fill="#10A37F" filter="url(#cmp-nw2)"/><circle cx="14" cy="5.5" r="1" fill="#4285F4" filter="url(#cmp-nw2)"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#D97757;">A: Neon</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#10A37F;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="cmp-sb" cx="40%" cy="35%" r="55%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="40%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></radialGradient></defs>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="2.4"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="2.4"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="2.4"/>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#cmp-sb)" stroke="none"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="#10A37F" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="#4285F4" stroke="white" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#10A37F;">B: Solid</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#8B5CF6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="cmp-gf"><stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="35%" stop-color="#D97757"/><stop offset="65%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></radialGradient>
|
||
<linearGradient id="cmp-go1" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#D97757"/><stop offset="100%" stop-color="#10A37F"/></linearGradient>
|
||
<linearGradient id="cmp-go2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#10A37F"/><stop offset="100%" stop-color="#4285F4"/></linearGradient>
|
||
<linearGradient id="cmp-go3" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#4285F4"/><stop offset="100%" stop-color="#D97757"/></linearGradient>
|
||
</defs>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#cmp-go1)" stroke-width="2" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#cmp-go2)" stroke-width="2" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#cmp-go3)" stroke-width="2" opacity="0.85"/>
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#cmp-gf)" stroke="none"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#D97757"/><circle cx="8" cy="16" r="1.5" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#8B5CF6;">C: Fusion</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#666;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="white" stroke-width="1.2" opacity="0.18"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="white" stroke-width="1.2" opacity="0.18"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="white" stroke-width="1.2" opacity="0.18"/>
|
||
<path d="M15 11.2 A8 3 0 0 1 19 11.7" stroke="#D97757" stroke-width="1.5"/>
|
||
<path d="M9.5 15 A8 3 30 0 1 7.5 17" stroke="#10A37F" stroke-width="1.5"/>
|
||
<path d="M15 5.8 A8 3 -30 0 1 13 4.8" stroke="#4285F4" stroke-width="1.5"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="#D97757"/><circle cx="8" cy="16" r="1.3" fill="#10A37F"/><circle cx="14" cy="5.5" r="1.3" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>D: Minimal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== D3 Theme-Optimized Variants ========== -->
|
||
</div>
|
||
|
||
<h1 style="margin-top:60px;">D3 — Theme Color Variants</h1>
|
||
<p class="subtitle">4 core sphere styles × 4 theme colors (Blue / Green / Orange / Purple)</p>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- D3-V1: Layered Rings -->
|
||
<div class="card">
|
||
<h2>D3-V1: Layered Rings</h2>
|
||
<div class="zh">层叠光环 — 同心圆营造纵深感</div>
|
||
<div class="desc">
|
||
Multiple concentric rings with decreasing opacity create a sense of depth and gravitational pull.
|
||
The outermost ring is barely visible, pulling the eye inward toward the bright core.
|
||
</div>
|
||
<div class="preview-row">
|
||
<!-- Blue -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v1b-core"><stop offset="0%" stop-color="#DBEAFE"/><stop offset="100%" stop-color="#3B82F6"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5" fill="none" stroke="#3B82F6" stroke-width="0.3" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#60A5FA" stroke-width="0.4" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#93C5FD" stroke-width="0.5" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#v1b-core)" stroke="none"/>
|
||
<circle cx="11.2" cy="11.2" r="0.8" fill="white" stroke="none" opacity="0.5"/>
|
||
<!-- Orbits -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<!-- Particles -->
|
||
<circle cx="17" cy="10.5" r="1.4" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">Blue</span>
|
||
</div>
|
||
<!-- Green -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v1g-core"><stop offset="0%" stop-color="#D1FAE5"/><stop offset="100%" stop-color="#22C55E"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5" fill="none" stroke="#22C55E" stroke-width="0.3" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#34D399" stroke-width="0.4" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#6EE7B7" stroke-width="0.5" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#v1g-core)" stroke="none"/>
|
||
<circle cx="11.2" cy="11.2" r="0.8" fill="white" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#34D399" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#34D399" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#34D399" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.4" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#22C55E;">Green</span>
|
||
</div>
|
||
<!-- Orange -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v1o-core"><stop offset="0%" stop-color="#FEF3C7"/><stop offset="100%" stop-color="#F59E0B"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5" fill="none" stroke="#F59E0B" stroke-width="0.3" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#FBBF24" stroke-width="0.4" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#FCD34D" stroke-width="0.5" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#v1o-core)" stroke="none"/>
|
||
<circle cx="11.2" cy="11.2" r="0.8" fill="white" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FBBF24" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#FBBF24" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#FBBF24" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.4" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#F59E0B;">Orange</span>
|
||
</div>
|
||
<!-- Purple -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v1p-core"><stop offset="0%" stop-color="#F3E8FF"/><stop offset="100%" stop-color="#8B5CF6"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5" fill="none" stroke="#8B5CF6" stroke-width="0.3" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#A78BFA" stroke-width="0.4" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#C4B5FD" stroke-width="0.5" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#v1p-core)" stroke="none"/>
|
||
<circle cx="11.2" cy="11.2" r="0.8" fill="white" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#A78BFA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#A78BFA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A78BFA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.4" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#8B5CF6;">Purple</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D3-V2: Glass Sphere -->
|
||
<div class="card">
|
||
<h2>D3-V2: Glass Sphere</h2>
|
||
<div class="zh">玻璃球体 — 3D 高光 + 阴影投射</div>
|
||
<div class="desc">
|
||
A 3D glass-like sphere with an offset highlight crescent and subtle shadow.
|
||
The off-center radial gradient creates dimensionality. Orbits use the primary-400 tone for cohesion.
|
||
</div>
|
||
<div class="preview-row">
|
||
<!-- Blue -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v2b-core" cx="40%" cy="35%" r="60%">
|
||
<stop offset="0%" stop-color="#BFDBFE"/>
|
||
<stop offset="45%" stop-color="#3B82F6"/>
|
||
<stop offset="100%" stop-color="#1E3A8A"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Shadow -->
|
||
<ellipse cx="12.3" cy="12.5" rx="2.3" ry="1" fill="#1E3A8A" opacity="0.15"/>
|
||
<!-- Main sphere -->
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#v2b-core)" stroke="none"/>
|
||
<!-- Highlight crescent -->
|
||
<path d="M10.5 10.2 A2 2 0 0 1 13 10.8" stroke="white" stroke-width="0.5" fill="none" opacity="0.6"/>
|
||
<circle cx="10.8" cy="10.5" r="0.5" fill="white" stroke="none" opacity="0.45"/>
|
||
<!-- Orbits -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.1"/>
|
||
<!-- Particles with mini-highlight -->
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="16.6" cy="10.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="7.6" cy="15.7" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="13.6" cy="5.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">Blue</span>
|
||
</div>
|
||
<!-- Green -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v2g-core" cx="40%" cy="35%" r="60%">
|
||
<stop offset="0%" stop-color="#A7F3D0"/>
|
||
<stop offset="45%" stop-color="#22C55E"/>
|
||
<stop offset="100%" stop-color="#065F46"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<ellipse cx="12.3" cy="12.5" rx="2.3" ry="1" fill="#065F46" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#v2g-core)" stroke="none"/>
|
||
<path d="M10.5 10.2 A2 2 0 0 1 13 10.8" stroke="white" stroke-width="0.5" fill="none" opacity="0.6"/>
|
||
<circle cx="10.8" cy="10.5" r="0.5" fill="white" stroke="none" opacity="0.45"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#22C55E" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#22C55E" stroke="none"/>
|
||
<circle cx="16.6" cy="10.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#22C55E" stroke="none"/>
|
||
<circle cx="7.6" cy="15.7" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#22C55E" stroke="none"/>
|
||
<circle cx="13.6" cy="5.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#22C55E;">Green</span>
|
||
</div>
|
||
<!-- Orange -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v2o-core" cx="40%" cy="35%" r="60%">
|
||
<stop offset="0%" stop-color="#FDE68A"/>
|
||
<stop offset="45%" stop-color="#F59E0B"/>
|
||
<stop offset="100%" stop-color="#78350F"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<ellipse cx="12.3" cy="12.5" rx="2.3" ry="1" fill="#78350F" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#v2o-core)" stroke="none"/>
|
||
<path d="M10.5 10.2 A2 2 0 0 1 13 10.8" stroke="white" stroke-width="0.5" fill="none" opacity="0.6"/>
|
||
<circle cx="10.8" cy="10.5" r="0.5" fill="white" stroke="none" opacity="0.45"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#F59E0B" stroke="none"/>
|
||
<circle cx="16.6" cy="10.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#F59E0B" stroke="none"/>
|
||
<circle cx="7.6" cy="15.7" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#F59E0B" stroke="none"/>
|
||
<circle cx="13.6" cy="5.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#F59E0B;">Orange</span>
|
||
</div>
|
||
<!-- Purple -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v2p-core" cx="40%" cy="35%" r="60%">
|
||
<stop offset="0%" stop-color="#E9D5FF"/>
|
||
<stop offset="45%" stop-color="#8B5CF6"/>
|
||
<stop offset="100%" stop-color="#3B0764"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<ellipse cx="12.3" cy="12.5" rx="2.3" ry="1" fill="#3B0764" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#v2p-core)" stroke="none"/>
|
||
<path d="M10.5 10.2 A2 2 0 0 1 13 10.8" stroke="white" stroke-width="0.5" fill="none" opacity="0.6"/>
|
||
<circle cx="10.8" cy="10.5" r="0.5" fill="white" stroke="none" opacity="0.45"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#8B5CF6" stroke="none"/>
|
||
<circle cx="16.6" cy="10.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#8B5CF6" stroke="none"/>
|
||
<circle cx="7.6" cy="15.7" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#8B5CF6" stroke="none"/>
|
||
<circle cx="13.6" cy="5.2" r="0.4" fill="white" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#8B5CF6;">Purple</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D3-V3: Pulsating Core -->
|
||
<div class="card">
|
||
<h2>D3-V3: Pulsating Core</h2>
|
||
<div class="zh">脉冲核心 — 能量波纹向外扩散</div>
|
||
<div class="desc">
|
||
An energy core emanating pulse rings outward. The core uses a bright-to-deep gradient.
|
||
Two expanding pulse rings suggest continuous energy output. Particles glow with theme-colored halos.
|
||
</div>
|
||
<div class="preview-row">
|
||
<!-- Blue -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v3b-core"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#60A5FA"/><stop offset="100%" stop-color="#1D4ED8"/></radialGradient>
|
||
</defs>
|
||
<!-- Pulse rings -->
|
||
<circle cx="12" cy="12" r="5.5" fill="none" stroke="#3B82F6" stroke-width="0.6" opacity="0.06"/>
|
||
<circle cx="12" cy="12" r="4.2" fill="none" stroke="#60A5FA" stroke-width="0.7" opacity="0.12"/>
|
||
<!-- Core glow -->
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" stroke="none" opacity="0.08"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.4" fill="url(#v3b-core)" stroke="none"/>
|
||
<!-- Orbits -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<!-- Particles with glow halos -->
|
||
<circle cx="17" cy="10.5" r="2" fill="#3B82F6" stroke="none" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="2" fill="#3B82F6" stroke="none" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="2" fill="#3B82F6" stroke="none" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">Blue</span>
|
||
</div>
|
||
<!-- Green -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v3g-core"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#34D399"/><stop offset="100%" stop-color="#047857"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5.5" fill="none" stroke="#22C55E" stroke-width="0.6" opacity="0.06"/>
|
||
<circle cx="12" cy="12" r="4.2" fill="none" stroke="#34D399" stroke-width="0.7" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="#22C55E" stroke="none" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="2.4" fill="url(#v3g-core)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#34D399" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<circle cx="17" cy="10.5" r="2" fill="#22C55E" stroke="none" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="2" fill="#22C55E" stroke="none" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="2" fill="#22C55E" stroke="none" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#22C55E;">Green</span>
|
||
</div>
|
||
<!-- Orange -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v3o-core"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#FBBF24"/><stop offset="100%" stop-color="#B45309"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5.5" fill="none" stroke="#F59E0B" stroke-width="0.6" opacity="0.06"/>
|
||
<circle cx="12" cy="12" r="4.2" fill="none" stroke="#FBBF24" stroke-width="0.7" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="#F59E0B" stroke="none" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="2.4" fill="url(#v3o-core)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FBBF24" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<circle cx="17" cy="10.5" r="2" fill="#F59E0B" stroke="none" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="2" fill="#F59E0B" stroke="none" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="2" fill="#F59E0B" stroke="none" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#F59E0B;">Orange</span>
|
||
</div>
|
||
<!-- Purple -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="v3p-core"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#A78BFA"/><stop offset="100%" stop-color="#6D28D9"/></radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="0.6" opacity="0.06"/>
|
||
<circle cx="12" cy="12" r="4.2" fill="none" stroke="#A78BFA" stroke-width="0.7" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="#8B5CF6" stroke="none" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="2.4" fill="url(#v3p-core)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#A78BFA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<circle cx="17" cy="10.5" r="2" fill="#8B5CF6" stroke="none" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="2" fill="#8B5CF6" stroke="none" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="2" fill="#8B5CF6" stroke="none" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#8B5CF6;">Purple</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D3-V4: Gemstone Facet -->
|
||
<div class="card">
|
||
<h2>D3-V4: Gemstone Facet</h2>
|
||
<div class="zh">宝石切面 — 棱角高光晶体核心</div>
|
||
<div class="desc">
|
||
A crystalline diamond-shaped core with angular facet highlights suggesting a cut gemstone.
|
||
The faceted geometry contrasts with the smooth orbital curves, creating visual tension and premium feel.
|
||
</div>
|
||
<div class="preview-row">
|
||
<!-- Blue -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="v4b-fill" x1="30%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#BFDBFE"/>
|
||
<stop offset="50%" stop-color="#3B82F6"/>
|
||
<stop offset="100%" stop-color="#1E3A8A"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Diamond core -->
|
||
<path d="M12 8.5 L15 12 L12 15.5 L9 12 Z" fill="url(#v4b-fill)" stroke="#60A5FA" stroke-width="0.4" opacity="0.9"/>
|
||
<!-- Facet highlight lines -->
|
||
<path d="M12 8.5 L12 12 L9 12" fill="none" stroke="white" stroke-width="0.3" opacity="0.3"/>
|
||
<path d="M10 9.8 L11.5 10.5" stroke="white" stroke-width="0.5" opacity="0.5"/>
|
||
<!-- Outer glow -->
|
||
<path d="M12 7.5 L16 12 L12 16.5 L8 12 Z" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.15"/>
|
||
<!-- Orbits -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1" opacity="0.08"/>
|
||
<!-- Diamond particles -->
|
||
<path d="M17 9.5 L18 10.5 L17 11.5 L16 10.5 Z" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
<path d="M8 15 L9 16 L8 17 L7 16 Z" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
<path d="M14 4.5 L15 5.5 L14 6.5 L13 5.5 Z" fill="#93C5FD" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">Blue</span>
|
||
</div>
|
||
<!-- Green -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="v4g-fill" x1="30%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#A7F3D0"/>
|
||
<stop offset="50%" stop-color="#22C55E"/>
|
||
<stop offset="100%" stop-color="#065F46"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M12 8.5 L15 12 L12 15.5 L9 12 Z" fill="url(#v4g-fill)" stroke="#34D399" stroke-width="0.4" opacity="0.9"/>
|
||
<path d="M12 8.5 L12 12 L9 12" fill="none" stroke="white" stroke-width="0.3" opacity="0.3"/>
|
||
<path d="M10 9.8 L11.5 10.5" stroke="white" stroke-width="0.5" opacity="0.5"/>
|
||
<path d="M12 7.5 L16 12 L12 16.5 L8 12 Z" fill="none" stroke="#34D399" stroke-width="0.3" opacity="0.15"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#34D399" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#22C55E" stroke-width="1" opacity="0.08"/>
|
||
<path d="M17 9.5 L18 10.5 L17 11.5 L16 10.5 Z" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
<path d="M8 15 L9 16 L8 17 L7 16 Z" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
<path d="M14 4.5 L15 5.5 L14 6.5 L13 5.5 Z" fill="#6EE7B7" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#22C55E;">Green</span>
|
||
</div>
|
||
<!-- Orange -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="v4o-fill" x1="30%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#FDE68A"/>
|
||
<stop offset="50%" stop-color="#F59E0B"/>
|
||
<stop offset="100%" stop-color="#78350F"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M12 8.5 L15 12 L12 15.5 L9 12 Z" fill="url(#v4o-fill)" stroke="#FBBF24" stroke-width="0.4" opacity="0.9"/>
|
||
<path d="M12 8.5 L12 12 L9 12" fill="none" stroke="white" stroke-width="0.3" opacity="0.3"/>
|
||
<path d="M10 9.8 L11.5 10.5" stroke="white" stroke-width="0.5" opacity="0.5"/>
|
||
<path d="M12 7.5 L16 12 L12 16.5 L8 12 Z" fill="none" stroke="#FBBF24" stroke-width="0.3" opacity="0.15"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#FBBF24" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#F59E0B" stroke-width="1" opacity="0.08"/>
|
||
<path d="M17 9.5 L18 10.5 L17 11.5 L16 10.5 Z" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
<path d="M8 15 L9 16 L8 17 L7 16 Z" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
<path d="M14 4.5 L15 5.5 L14 6.5 L13 5.5 Z" fill="#FCD34D" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#F59E0B;">Orange</span>
|
||
</div>
|
||
<!-- Purple -->
|
||
<div class="preview-box">
|
||
<div class="size-128" style="background:#0f172a;">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="v4p-fill" x1="30%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#E9D5FF"/>
|
||
<stop offset="50%" stop-color="#8B5CF6"/>
|
||
<stop offset="100%" stop-color="#3B0764"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M12 8.5 L15 12 L12 15.5 L9 12 Z" fill="url(#v4p-fill)" stroke="#A78BFA" stroke-width="0.4" opacity="0.9"/>
|
||
<path d="M12 8.5 L12 12 L9 12" fill="none" stroke="white" stroke-width="0.3" opacity="0.3"/>
|
||
<path d="M10 9.8 L11.5 10.5" stroke="white" stroke-width="0.5" opacity="0.5"/>
|
||
<path d="M12 7.5 L16 12 L12 16.5 L8 12 Z" fill="none" stroke="#A78BFA" stroke-width="0.3" opacity="0.15"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A78BFA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#8B5CF6" stroke-width="1" opacity="0.08"/>
|
||
<path d="M17 9.5 L18 10.5 L17 11.5 L16 10.5 Z" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
<path d="M8 15 L9 16 L8 17 L7 16 Z" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
<path d="M14 4.5 L15 5.5 L14 6.5 L13 5.5 Z" fill="#C4B5FD" stroke="none" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#8B5CF6;">Purple</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- D3 Variants 64px Comparison -->
|
||
<div class="comparison">
|
||
<h2>D3 Variants — 64px Dark Mode Comparison</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#1e293b;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="cmp-d3"><stop offset="0%" stop-color="white"/><stop offset="50%" stop-color="#60A5FA"/><stop offset="100%" stop-color="#1D4ED8"/></radialGradient></defs>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.2"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#cmp-d3)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.5" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.5" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>D3 Original</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="cmp-v1"><stop offset="0%" stop-color="#DBEAFE"/><stop offset="100%" stop-color="#3B82F6"/></radialGradient></defs>
|
||
<circle cx="12" cy="12" r="4" fill="none" stroke="#60A5FA" stroke-width="0.4" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="none" stroke="#93C5FD" stroke-width="0.5" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#cmp-v1)" stroke="none"/>
|
||
<circle cx="11.2" cy="11.2" r="0.8" fill="white" stroke="none" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.8"/>
|
||
<circle cx="17" cy="10.5" r="1.4" fill="#93C5FD" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="#93C5FD" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="#93C5FD" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">V1 Rings</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="cmp-v2" cx="40%" cy="35%" r="60%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="45%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></radialGradient></defs>
|
||
<circle cx="12" cy="12" r="2.8" fill="url(#cmp-v2)" stroke="none"/>
|
||
<path d="M10.5 10.2 A2 2 0 0 1 13 10.8" stroke="white" stroke-width="0.5" fill="none" opacity="0.6"/>
|
||
<circle cx="10.8" cy="10.5" r="0.5" fill="white" stroke="none" opacity="0.45"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">V2 Glass</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><radialGradient id="cmp-v3"><stop offset="0%" stop-color="white"/><stop offset="40%" stop-color="#60A5FA"/><stop offset="100%" stop-color="#1D4ED8"/></radialGradient></defs>
|
||
<circle cx="12" cy="12" r="4.2" fill="none" stroke="#60A5FA" stroke-width="0.7" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" stroke="none" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="2.4" fill="url(#cmp-v3)" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.8"/>
|
||
<circle cx="17" cy="10.5" r="2" fill="#3B82F6" stroke="none" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.3" fill="white" stroke="none" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">V3 Pulse</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="background:#0f172a; border-color:#3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke-linecap="round">
|
||
<defs><linearGradient id="cmp-v4" x1="30%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#BFDBFE"/><stop offset="50%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1E3A8A"/></linearGradient></defs>
|
||
<path d="M12 8.5 L15 12 L12 15.5 L9 12 Z" fill="url(#cmp-v4)" stroke="#60A5FA" stroke-width="0.4"/>
|
||
<path d="M10 9.8 L11.5 10.5" stroke="white" stroke-width="0.5" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.3" opacity="0.75"/>
|
||
<path d="M17 9.5 L18 10.5 L17 11.5 L16 10.5 Z" fill="#93C5FD" stroke="none"/>
|
||
<path d="M8 15 L9 16 L8 17 L7 16 Z" fill="#93C5FD" stroke="none"/>
|
||
<path d="M14 4.5 L15 5.5 L14 6.5 L13 5.5 Z" fill="#93C5FD" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color:#3B82F6;">V4 Gem</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Comparison with existing AI icons -->
|
||
<div class="comparison">
|
||
<h2>Side-by-side Comparison with AI Provider Icons</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 16 16" width="40" height="40" fill="#D97757">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #D97757;">Claude</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 16 16" width="40" height="40" fill="#10A37F">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #10A37F;">OpenAI</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="#4285F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="#4285F4" fill-opacity="0.15"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #4285F4;">Gemini</span>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="#3B82F6" stroke="none" opacity="0.9"/>
|
||
<path d="M13.5 10.5 C16 8, 19 6, 21 4" opacity="0.85"/>
|
||
<path d="M14 12.5 C17 14, 19 17, 21 20" opacity="0.85"/>
|
||
<path d="M10 11.5 C7 10, 5 8, 3 5" opacity="0.85"/>
|
||
<path d="M10.5 13.5 C8 16, 5 18, 3 20" opacity="0.45"/>
|
||
<circle cx="21" cy="4" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="20" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="5" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW A</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 6 C7 6, 9 10, 12 12 C15 14, 17 18, 21 18"/>
|
||
<path d="M3 12 C6 12, 9 14, 12 12 C15 10, 18 12, 21 12"/>
|
||
<path d="M3 18 C7 18, 9 14, 12 12 C15 10, 17 6, 21 6"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="#3B82F6" stroke="none" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW B</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 8 L15.5 10 L15.5 14 L12 16 L8.5 14 L8.5 10 Z" fill="#3B82F6" fill-opacity="0.08"/>
|
||
<line x1="12" y1="8" x2="12" y2="3"/>
|
||
<line x1="15.5" y1="10" x2="20" y2="6"/>
|
||
<line x1="15.5" y1="14" x2="20" y2="18"/>
|
||
<line x1="12" y1="16" x2="12" y2="21"/>
|
||
<line x1="8.5" y1="14" x2="4" y2="18"/>
|
||
<line x1="8.5" y1="10" x2="4" y2="6"/>
|
||
<circle cx="12" cy="3" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="6" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="20" cy="18" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="12" cy="21" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="18" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="4" cy="6" r="1.5" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="#3B82F6" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW C</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2" fill="#3B82F6" stroke="none"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" opacity="0.7"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" opacity="0.3" stroke-dasharray="2 2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" opacity="0.7"/>
|
||
<circle cx="17" cy="10.5" r="1.2" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="8" cy="16" r="1.2" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
<circle cx="14" cy="5.5" r="1.2" fill="#3B82F6" stroke="none" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW D</span>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.4" stroke-linecap="round">
|
||
<path d="M8 2 C15 5, 9 9, 16 12 C9 15, 15 19, 8 22" opacity="0.85"/>
|
||
<path d="M16 2 C9 5, 15 9, 8 12 C15 15, 9 19, 16 22" opacity="0.4"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="#3B82F6" stroke="none" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW E</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="4,6 12,12 4,18" opacity="0.3"/>
|
||
<polyline points="8,6 16,12 8,18" opacity="0.6"/>
|
||
<polyline points="12,6 20,12 12,18" opacity="0.9"/>
|
||
<circle cx="20" cy="12" r="1.8" fill="#3B82F6" stroke="none" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW F</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="#3B82F6" stroke="none"/>
|
||
<path d="M12 9.5 C10 7, 8 4, 6 2" stroke-width="2"/>
|
||
<path d="M13.8 13.2 C16 14, 19 15, 21 17" stroke-width="2"/>
|
||
<path d="M10.2 13.2 C8 14, 5 15, 3 17" stroke-width="2"/>
|
||
<circle cx="6" cy="2" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
<circle cx="21" cy="17" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
<circle cx="3" cy="17" r="1" fill="#3B82F6" stroke="none" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW G</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F6;">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3B82F6" stroke-width="1.6" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="#3B82F6" stroke="none"/>
|
||
<path d="M7.5 7.5 A6.5 6.5 0 0 1 16.5 7.5" opacity="0.7"/>
|
||
<path d="M16.5 16.5 A6.5 6.5 0 0 1 7.5 16.5" opacity="0.7"/>
|
||
<path d="M7.5 16.5 A6.5 6.5 0 0 1 7.5 7.5" opacity="0.5"/>
|
||
<path d="M16.5 7.5 A6.5 6.5 0 0 1 16.5 16.5" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span style="color: #3B82F6;">CCW H</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- D1 Optimized Variants (4 directions) -->
|
||
<!-- ============================================ -->
|
||
<div style="max-width: 1200px; margin: 80px auto 0;">
|
||
<h1 style="border-top: 2px solid #3B82F6; padding-top: 40px;">D1 Optimized Variants</h1>
|
||
<p class="subtitle">基于 D1 Vibrant Flow 的 4 种风格优化方向 — 颜色 / 透明度 / 圆角 / 线条</p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- D1-V1: Gradient Flow 渐变律动 -->
|
||
<div class="card">
|
||
<h2>D1-V1: Gradient Flow</h2>
|
||
<div class="zh">渐变律动 — 渐变轨道 + 发光核心 + 大圆点</div>
|
||
<div class="desc">
|
||
Orbits use linear gradients from #3B82F6 → #60A5FA for a flowing shimmer.
|
||
Core features a radial gradient (white center → brand blue edge).
|
||
Agent dots enlarged (r=2.0) with subtle white stroke border. Round linecaps throughout.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="d1v1_orb1" x1="0" y1="12" x2="24" y2="12" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#3B82F6"/>
|
||
<stop offset="100%" stop-color="#93C5FD"/>
|
||
</linearGradient>
|
||
<linearGradient id="d1v1_orb2" x1="7" y1="4" x2="17" y2="20" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#3B82F6"/>
|
||
<stop offset="100%" stop-color="#60A5FA"/>
|
||
</linearGradient>
|
||
<linearGradient id="d1v1_orb3" x1="17" y1="4" x2="7" y2="20" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#60A5FA"/>
|
||
<stop offset="100%" stop-color="#3B82F6"/>
|
||
</linearGradient>
|
||
<radialGradient id="d1v1_core" cx="50%" cy="45%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.95"/>
|
||
<stop offset="50%" stop-color="#93C5FD" stop-opacity="0.6"/>
|
||
<stop offset="100%" stop-color="#3B82F6" stop-opacity="0.8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Core glow -->
|
||
<circle cx="12" cy="12" r="3.8" fill="none" stroke="#60A5FA" stroke-width="0.3" opacity="0.25"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#d1v1_core)"/>
|
||
<!-- Orbit 1 -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#d1v1_orb1)" stroke-width="1.2" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="url(#d1v1_orb1)" stroke-width="1.2" opacity="0.15"/>
|
||
<!-- Orbit 2 -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#d1v1_orb2)" stroke-width="1.2" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="url(#d1v1_orb2)" stroke-width="1.2" opacity="0.15"/>
|
||
<!-- Orbit 3 -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#d1v1_orb3)" stroke-width="1.2" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="url(#d1v1_orb3)" stroke-width="1.2" opacity="0.15"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="d1v1_orb1s" x1="0" y1="12" x2="24" y2="12" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#93C5FD"/>
|
||
</linearGradient>
|
||
<radialGradient id="d1v1_cores" cx="50%" cy="45%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="100%" stop-color="#3B82F6" stop-opacity="0.8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#d1v1_cores)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#d1v1_orb1s)" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.4" opacity="0.12"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.12"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#60A5FA" stroke-width="1.4" opacity="0.12"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.6" fill="#3B82F6"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.7"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.6"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.6"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#93C5FD" stroke-width="1.6"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#60A5FA" stroke-width="2.2"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#3B82F6" stroke-width="2.2"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#93C5FD" stroke-width="2.2"/>
|
||
<circle cx="17" cy="10" r="1.8" fill="#D97757"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V2: Glassy Essence 晶透本源 -->
|
||
<div class="card">
|
||
<h2>D1-V2: Glassy Essence</h2>
|
||
<div class="zh">晶透本源 — 半透明轨道 + 玻璃拟态核心 + 柔和圆角</div>
|
||
<div class="desc">
|
||
Glass-morphism aesthetic: orbits at 50% opacity, agent dots at 75% opacity.
|
||
Core uses layered transparent circles creating frosted glass depth.
|
||
All strokes use round caps and joins for maximum softness.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Core - glass layers -->
|
||
<circle cx="12" cy="12" r="3.5" fill="#3B82F6" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="#3B82F6" opacity="0.3"/>
|
||
<circle cx="12" cy="12" r="1.6" fill="white" opacity="0.85"/>
|
||
<!-- Orbit 1 -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.0" opacity="0.5"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.0" opacity="0.12"/>
|
||
<!-- Orbit 2 -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.0" opacity="0.5"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.0" opacity="0.12"/>
|
||
<!-- Orbit 3 -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.0" opacity="0.5"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.0" opacity="0.12"/>
|
||
<!-- Agent dots - semi-transparent -->
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.75"/>
|
||
<!-- Dot inner highlights -->
|
||
<circle cx="16.5" cy="10" r="0.6" fill="white" opacity="0.5"/>
|
||
<circle cx="7.5" cy="15.5" r="0.6" fill="white" opacity="0.5"/>
|
||
<circle cx="13.5" cy="5" r="0.6" fill="white" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.3" fill="#3B82F6" opacity="0.3"/>
|
||
<circle cx="12" cy="12" r="1.4" fill="white" opacity="0.8"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.2" opacity="0.5"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.5"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.5"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.2" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.75"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.8" fill="#3B82F6" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="1.6" fill="white" opacity="0.7"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.5" opacity="0.5"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.5" opacity="0.5"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#D97757" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.75"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" opacity="0.3"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="white" opacity="0.6"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#3B82F6" stroke-width="2" opacity="0.5"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#3B82F6" stroke-width="2" opacity="0.5"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#3B82F6" stroke-width="2" opacity="0.5"/>
|
||
<circle cx="17" cy="10" r="1.8" fill="#D97757" opacity="0.7"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.7"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="#4285F4" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V2+: Glassy Essence with AI Icons 晶透本源 + AI 图标 -->
|
||
<div class="card" style="grid-column: 1 / -1; border-color: #3B82F640;">
|
||
<h2>D1-V2+: Glassy Essence with AI Icons <span class="badge badge-rec">Enhanced</span></h2>
|
||
<div class="zh">晶透本源 + AI矢量图标 — 虚化核心 + 三色轨道 + Claude/OpenAI/Gemini 官方图标</div>
|
||
<div class="desc">
|
||
Based on D1-V2 Glassy Essence, with four key enhancements:<br>
|
||
1. Center sphere uses Gaussian blur filter for a dreamy, diffused core effect.<br>
|
||
2. Agent dots replaced with 3D spheres carrying AI provider vector icons (Claude burst, OpenAI knot, Gemini star).<br>
|
||
3. Each orbit color matches its AI provider: Claude #D97757, OpenAI #10A37F, Gemini #4285F4.<br>
|
||
4. Spheres use radialGradient with offset highlight for realistic 3D appearance, with subtle drop shadows.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="-1 -1 26 26" width="96" height="96" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<defs>
|
||
<filter id="d1v2p_blur" x="-80%" y="-80%" width="260%" height="260%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.6"/>
|
||
</filter>
|
||
<filter id="d1v2p_blur_outer" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.0"/>
|
||
</filter>
|
||
<!-- 3D Sphere radialGradients -->
|
||
<radialGradient id="d1v2p_sphere_claude" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#F5D5C5"/>
|
||
<stop offset="30%" stop-color="#E8997D"/>
|
||
<stop offset="65%" stop-color="#D97757"/>
|
||
<stop offset="100%" stop-color="#9B4F30"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p_sphere_openai" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#B8F0DD"/>
|
||
<stop offset="30%" stop-color="#3DC9A0"/>
|
||
<stop offset="65%" stop-color="#10A37F"/>
|
||
<stop offset="100%" stop-color="#0B7A5C"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p_sphere_gemini" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#C5DAF9"/>
|
||
<stop offset="30%" stop-color="#72A8F7"/>
|
||
<stop offset="65%" stop-color="#4285F4"/>
|
||
<stop offset="100%" stop-color="#2A5FC0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- === LAYER 1: Back-facing orbit halves (behind core) === -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" opacity="0.25"/>
|
||
|
||
<!-- === LAYER 2: Core - blurred layers === -->
|
||
<circle cx="12" cy="12" r="4" fill="#3B82F6" opacity="0.12" filter="url(#d1v2p_blur_outer)"/>
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" opacity="0.25" filter="url(#d1v2p_blur)"/>
|
||
<circle cx="12" cy="12" r="2" fill="#93C5FD" opacity="0.45" filter="url(#d1v2p_blur)"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.7" filter="url(#d1v2p_blur)"/>
|
||
|
||
<!-- === LAYER 3: Front-facing orbit halves (above core) - solid & vibrant === -->
|
||
<!-- Orbit 1 - Claude orange -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.6" opacity="0.92"/>
|
||
<!-- Orbit 2 - OpenAI green -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.6" opacity="0.92"/>
|
||
<!-- Orbit 3 - Gemini blue -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.6" opacity="0.92"/>
|
||
|
||
<!-- === LAYER 4: AI provider icons on 3D spheres === -->
|
||
<!-- Claude sphere at orbit position (17, 9.7) -->
|
||
<g>
|
||
<ellipse cx="17.1" cy="11.7" rx="1.5" ry="0.4" fill="#000" opacity="0.08"/>
|
||
<circle cx="17" cy="9.7" r="2.2" fill="url(#d1v2p_sphere_claude)"/>
|
||
<svg x="15.2" y="7.9" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.92">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<!-- OpenAI sphere at orbit position (8, 16) -->
|
||
<g>
|
||
<ellipse cx="8.1" cy="18" rx="1.5" ry="0.4" fill="#000" opacity="0.08"/>
|
||
<circle cx="8" cy="16" r="2.2" fill="url(#d1v2p_sphere_openai)"/>
|
||
<svg x="6.2" y="14.2" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.92">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<!-- Gemini sphere at orbit position (14, 5.5) -->
|
||
<g>
|
||
<ellipse cx="14.1" cy="7.5" rx="1.5" ry="0.4" fill="#000" opacity="0.08"/>
|
||
<circle cx="14" cy="5.5" r="2.2" fill="url(#d1v2p_sphere_gemini)"/>
|
||
<svg x="12.5" y="4" width="3" height="3" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="white" fill-opacity="0.3"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="-1 -1 26 26" width="36" height="36" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<defs>
|
||
<filter id="d1v2p_blur3" x="-80%" y="-80%" width="260%" height="260%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
|
||
</filter>
|
||
<radialGradient id="d1v2p3_sphere_claude" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#F5D5C5"/><stop offset="35%" stop-color="#E8997D"/><stop offset="70%" stop-color="#D97757"/><stop offset="100%" stop-color="#9B4F30"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p3_sphere_openai" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#B8F0DD"/><stop offset="35%" stop-color="#3DC9A0"/><stop offset="70%" stop-color="#10A37F"/><stop offset="100%" stop-color="#0B7A5C"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p3_sphere_gemini" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#C5DAF9"/><stop offset="35%" stop-color="#72A8F7"/><stop offset="70%" stop-color="#4285F4"/><stop offset="100%" stop-color="#2A5FC0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" opacity="0.25"/>
|
||
<!-- Core - blurred -->
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" opacity="0.2" filter="url(#d1v2p_blur3)"/>
|
||
<circle cx="12" cy="12" r="2" fill="#93C5FD" opacity="0.4" filter="url(#d1v2p_blur3)"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.65" filter="url(#d1v2p_blur3)"/>
|
||
<!-- Front halves - solid -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.6" opacity="0.92"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.6" opacity="0.92"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.6" opacity="0.92"/>
|
||
<!-- Claude sphere + icon -->
|
||
<ellipse cx="17.1" cy="11.7" rx="1.3" ry="0.35" fill="#000" opacity="0.06"/>
|
||
<circle cx="17" cy="9.7" r="2.1" fill="url(#d1v2p3_sphere_claude)"/>
|
||
<svg x="15.2" y="7.9" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.9">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
<!-- OpenAI sphere + icon -->
|
||
<ellipse cx="8.1" cy="18" rx="1.3" ry="0.35" fill="#000" opacity="0.06"/>
|
||
<circle cx="8" cy="16" r="2.1" fill="url(#d1v2p3_sphere_openai)"/>
|
||
<svg x="6.2" y="14.2" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.9">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
<!-- Gemini sphere + icon -->
|
||
<ellipse cx="14.1" cy="7.5" rx="1.3" ry="0.35" fill="#000" opacity="0.06"/>
|
||
<circle cx="14" cy="5.5" r="2.1" fill="url(#d1v2p3_sphere_gemini)"/>
|
||
<svg x="12.5" y="4" width="3" height="3" viewBox="0 0 24 24" fill="none" opacity="0.9">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="white" stroke-width="2" fill="white" fill-opacity="0.3"/>
|
||
</svg>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="-1 -1 26 26" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="d1v2p_blur4" x="-80%" y="-80%" width="260%" height="260%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.4"/>
|
||
</filter>
|
||
<radialGradient id="d1v2p4_sc" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#F5D5C5"/><stop offset="50%" stop-color="#D97757"/><stop offset="100%" stop-color="#9B4F30"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p4_so" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#B8F0DD"/><stop offset="50%" stop-color="#10A37F"/><stop offset="100%" stop-color="#0B7A5C"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p4_sg" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#C5DAF9"/><stop offset="50%" stop-color="#4285F4"/><stop offset="100%" stop-color="#2A5FC0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" opacity="0.25"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" opacity="0.25"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.8" fill="#3B82F6" opacity="0.2" filter="url(#d1v2p_blur4)"/>
|
||
<circle cx="12" cy="12" r="1.6" fill="white" opacity="0.55" filter="url(#d1v2p_blur4)"/>
|
||
<!-- Front halves - solid -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.8" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.8" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.8" opacity="0.9"/>
|
||
<!-- 3D sphere dots at small size -->
|
||
<circle cx="17" cy="9.7" r="1.5" fill="url(#d1v2p4_sc)"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="url(#d1v2p4_so)"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="url(#d1v2p4_sg)"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="-1 -1 26 26" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="d1v2p5_sc" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#F5D5C5"/><stop offset="55%" stop-color="#D97757"/><stop offset="100%" stop-color="#9B4F30"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p5_so" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#B8F0DD"/><stop offset="55%" stop-color="#10A37F"/><stop offset="100%" stop-color="#0B7A5C"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2p5_sg" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#C5DAF9"/><stop offset="55%" stop-color="#4285F4"/><stop offset="100%" stop-color="#2A5FC0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Back halves -->
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="1.6" opacity="0.25"/>
|
||
<path d="M16.5 19 A7 2.5 30 0 1 7.5 5" stroke="#10A37F" stroke-width="1.6" opacity="0.25"/>
|
||
<path d="M7.5 19 A7 2.5 -30 0 1 16.5 5" stroke="#4285F4" stroke-width="1.6" opacity="0.25"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" opacity="0.25"/>
|
||
<circle cx="12" cy="12" r="1.6" fill="white" opacity="0.45"/>
|
||
<!-- Front halves - solid -->
|
||
<path d="M19 12 A7 2.5 0 0 1 5 12" stroke="#D97757" stroke-width="2.2" opacity="0.9"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2.2" opacity="0.9"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2.2" opacity="0.9"/>
|
||
<!-- 3D sphere dots -->
|
||
<circle cx="17" cy="9.5" r="1.8" fill="url(#d1v2p5_sc)"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="url(#d1v2p5_so)"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="url(#d1v2p5_sg)"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V2++ Minimal: Theme-adaptive line art 简约线条版 -->
|
||
<div class="card" style="grid-column: 1 / -1; border-color: currentColor; border-opacity: 0.2;">
|
||
<h2>D1-V2++ Minimal: Theme Line Art <span class="badge badge-rec">Adaptive</span></h2>
|
||
<div class="zh">简约线条版 — 纯 currentColor 跟随主题色 · 无渐变无滤镜 · 极简轨道+点</div>
|
||
<div class="desc">
|
||
Simplified from D1-V2+: pure <code>currentColor</code> strokes and fills, no gradients, no filters.<br>
|
||
Automatically adapts to light/dark theme. Front/back orbit layering preserved via opacity contrast.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="-1 -1 26 26" width="96" height="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Back orbit halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="0.8" fill="currentColor" opacity="0.3"/>
|
||
<!-- Front orbit halves -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<!-- Agent dots with AI icon outlines -->
|
||
<g>
|
||
<circle cx="17" cy="9.7" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="17" cy="9.7" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="15.2" y="7.9" width="3.6" height="3.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="8" cy="16" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="6.2" y="14.2" width="3.6" height="3.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="14" cy="5.5" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="12.5" y="4" width="3" height="3" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="-1 -1 26 26" width="36" height="36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" opacity="0.1"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="currentColor" opacity="0.2"/>
|
||
<!-- Front halves -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.7"/>
|
||
<!-- Agent icons -->
|
||
<g>
|
||
<circle cx="17" cy="9.7" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="17" cy="9.7" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="15.5" y="8.2" width="3" height="3" viewBox="0 0 16 16" fill="currentColor" opacity="0.95">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="8" cy="16" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="6.5" y="14.5" width="3" height="3" viewBox="0 0 16 16" fill="currentColor" opacity="0.95">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="14" cy="5.5" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="12.7" y="4.2" width="2.6" height="2.6" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="-1 -1 26 26" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round">
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="1" opacity="0.12"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="1" opacity="0.12"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="1" opacity="0.12"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.15"/>
|
||
<!-- Front halves -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.5" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.5" opacity="0.7"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="9.7" r="1.5" fill="currentColor" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="currentColor" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="currentColor" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="-1 -1 26 26" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round">
|
||
<!-- Back halves -->
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M16.5 19 A7 2.5 30 0 1 7.5 5" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M7.5 19 A7 2.5 -30 0 1 16.5 5" stroke-width="1.2" opacity="0.1"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.15"/>
|
||
<!-- Front halves -->
|
||
<path d="M19 12 A7 2.5 0 0 1 5 12" stroke-width="2" opacity="0.7"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke-width="2" opacity="0.7"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke-width="2" opacity="0.7"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="9.5" r="1.8" fill="currentColor" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.85"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="currentColor" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
<!-- Theme color demos -->
|
||
<div style="margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center;">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#3B82F6;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Brand Blue</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#D97757;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Claude</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#10A37F;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">OpenAI</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#8B5CF6;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Purple</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#ffffff;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">White</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;background:#f5f5f5;padding:8px 12px;border-radius:8px;">
|
||
<div style="color:#1a1a1a;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><circle cx="17" cy="9.7" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="17" cy="9.7" r="1.3" fill="currentColor" opacity="0.5"/><svg x="15.7" y="8.4" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg></g><g><circle cx="8" cy="16" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="8" cy="16" r="1.3" fill="currentColor" opacity="0.5"/><svg x="6.7" y="14.7" width="2.6" height="2.6" viewBox="0 0 16 16" fill="currentColor" opacity="0.95"><path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/></svg></g><g><circle cx="14" cy="5.5" r="1.8" fill="currentColor" opacity="0.12"/><circle cx="14" cy="5.5" r="1.3" fill="currentColor" opacity="0.5"/><svg x="12.85" y="4.35" width="2.3" height="2.3" viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" fill="currentColor" fill-opacity="0.3" opacity="0.95"/></svg></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;color:#999;">Dark on Light</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V2+++ Hybrid: Theme line art + branded AI icons -->
|
||
<div class="card" style="grid-column: 1 / -1; border-color: currentColor; border-opacity: 0.2;">
|
||
<h2>D1-V2+++: Branded Agents <span class="badge badge-rec">Hybrid</span></h2>
|
||
<div class="zh">品牌代理 — currentColor 轨道 + AI 图标保留品牌色 · 半自适应主题</div>
|
||
<div class="desc">
|
||
Based on D1-V2++ Minimal: orbits and core use <code>currentColor</code> for theme adaptation,<br>
|
||
but AI agent icons retain their brand colors (Claude <span style="color:#D97757;">#D97757</span>, OpenAI <span style="color:#10A37F;">#10A37F</span>, Gemini <span style="color:#4285F4;">#4285F4</span>).
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="-1 -1 26 26" width="96" height="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Back orbit halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" opacity="0.08"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="0.8" fill="currentColor" opacity="0.3"/>
|
||
<!-- Front orbit halves -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<!-- Agent icons with brand colors -->
|
||
<g>
|
||
<circle cx="17" cy="9.7" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="17" cy="9.7" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="15.2" y="7.9" width="3.6" height="3.6" viewBox="0 0 16 16" fill="#D97757" stroke="none" opacity="0.95">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="8" cy="16" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="6.2" y="14.2" width="3.6" height="3.6" viewBox="0 0 16 16" fill="#10A37F" stroke="none" opacity="0.95">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="14" cy="5.5" r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="12.5" y="4" width="3" height="3" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="#4285F4" stroke-width="2" fill="#4285F4" fill-opacity="0.3" opacity="0.95"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="-1 -1 26 26" width="36" height="36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.2" fill="currentColor" opacity="0.1"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="currentColor" opacity="0.2"/>
|
||
<!-- Front halves -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.7"/>
|
||
<!-- Agent icons with brand colors -->
|
||
<g>
|
||
<circle cx="17" cy="9.7" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="17" cy="9.7" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="15.5" y="8.2" width="3" height="3" viewBox="0 0 16 16" fill="#D97757" stroke="none" opacity="0.95">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="8" cy="16" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="8" cy="16" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="6.5" y="14.5" width="3" height="3" viewBox="0 0 16 16" fill="#10A37F" stroke="none" opacity="0.95">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<g>
|
||
<circle cx="14" cy="5.5" r="2" fill="currentColor" opacity="0.12"/>
|
||
<circle cx="14" cy="5.5" r="1.4" fill="currentColor" opacity="0.5"/>
|
||
<svg x="12.7" y="4.2" width="2.6" height="2.6" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="#4285F4" stroke-width="2" fill="#4285F4" fill-opacity="0.3" opacity="0.95"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="-1 -1 26 26" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="1" opacity="0.12"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="1" opacity="0.12"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="1" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.15"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.5" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.5" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.5" opacity="0.7"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.85"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="-1 -1 26 26" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round">
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M16.5 19 A7 2.5 30 0 1 7.5 5" stroke-width="1.2" opacity="0.1"/>
|
||
<path d="M7.5 19 A7 2.5 -30 0 1 16.5 5" stroke-width="1.2" opacity="0.1"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.15"/>
|
||
<path d="M19 12 A7 2.5 0 0 1 5 12" stroke-width="2" opacity="0.7"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke-width="2" opacity="0.7"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke-width="2" opacity="0.7"/>
|
||
<circle cx="17" cy="9.5" r="1.8" fill="#D97757" opacity="0.85"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.85"/>
|
||
<circle cx="14" cy="5" r="1.8" fill="#4285F4" opacity="0.85"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
<!-- Theme color demos -->
|
||
<div style="margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center;">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#3B82F6;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Brand Blue</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#D97757;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Claude</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#10A37F;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">OpenAI</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#8B5CF6;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">Purple</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">
|
||
<div style="color:#ffffff;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;opacity:0.5;">White</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;background:#f5f5f5;padding:8px 12px;border-radius:8px;">
|
||
<div style="color:#1a1a1a;">
|
||
<svg viewBox="-1 -1 26 26" width="48" height="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.12"/><circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<circle cx="17" cy="9.7" r="1.5" fill="#D97757" opacity="0.9"/><circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.9"/><circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:11px;color:#999;">Dark on Light</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V2+++ Animated: Orbital motion -->
|
||
<div class="card" style="grid-column: 1 / -1;">
|
||
<h2>D1-V2+++ Animated <span class="badge" style="background:#6366F1;color:white;">Motion</span></h2>
|
||
<div class="zh">动态版 — AI 图标沿轨道运行 · 核心呼吸脉动 · 深度透明度切换</div>
|
||
<div class="desc">
|
||
Animated orbital motion based on D1-V2+++ Branded Agents.<br>
|
||
Agents orbit at different speeds (8s / 10s / 12s). Core breathes with a gentle pulse. Agents fade when passing behind the core plane.
|
||
</div>
|
||
<div style="display: flex; gap: 40px; align-items: center; flex-wrap: wrap;">
|
||
<!-- Main animated showcase -->
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
|
||
<svg viewBox="-1 -1 26 26" width="200" height="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow:visible;">
|
||
<!-- Back orbit halves (static) -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.8" opacity="0.15"/>
|
||
<!-- Core breathing pulse -->
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor" opacity="0.08">
|
||
<animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.05;0.14;0.05" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
|
||
</circle>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" opacity="0.15">
|
||
<animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.1;0.28;0.1" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
|
||
</circle>
|
||
<circle cx="12" cy="12" r="0.8" fill="currentColor" opacity="0.3">
|
||
<animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.2;0.55;0.2" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
|
||
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="0.7;1.1;0.7" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
|
||
</circle>
|
||
<!-- Front orbit halves (static) -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.2" opacity="0.7"/>
|
||
<!-- Claude agent: horizontal orbit, 8s -->
|
||
<g>
|
||
<animateMotion dur="8s" repeatCount="indefinite" path="M20,12 A8,3,0,0,0,4,12 A8,3,0,0,0,20,12"/>
|
||
<animate attributeName="opacity" dur="8s" repeatCount="indefinite" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1" calcMode="spline" keySplines="0 0 1 1;0.4 0 0.6 1;0 0 1 1;0.4 0 0.6 1"/>
|
||
<circle r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="-1.8" y="-1.8" width="3.6" height="3.6" viewBox="0 0 16 16" fill="#D97757" stroke="none" opacity="0.95">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
</g>
|
||
<!-- OpenAI agent: 30° orbit, 10s, offset -3s -->
|
||
<g>
|
||
<animateMotion dur="10s" repeatCount="indefinite" begin="-3s" path="M7.1,4.5 A8,3,30,0,1,16.9,19.5 A8,3,30,0,1,7.1,4.5"/>
|
||
<animate attributeName="opacity" dur="10s" repeatCount="indefinite" begin="-3s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1" calcMode="spline" keySplines="0 0 1 1;0.4 0 0.6 1;0 0 1 1;0.4 0 0.6 1"/>
|
||
<circle r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="-1.8" y="-1.8" width="3.6" height="3.6" viewBox="0 0 16 16" fill="#10A37F" stroke="none" opacity="0.95">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
</g>
|
||
<!-- Gemini agent: -30° orbit, 12s, offset -5s -->
|
||
<g>
|
||
<animateMotion dur="12s" repeatCount="indefinite" begin="-5s" path="M16.9,4.5 A8,3,-30,0,1,7.1,19.5 A8,3,-30,0,1,16.9,4.5"/>
|
||
<animate attributeName="opacity" dur="12s" repeatCount="indefinite" begin="-5s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1" calcMode="spline" keySplines="0 0 1 1;0.4 0 0.6 1;0 0 1 1;0.4 0 0.6 1"/>
|
||
<circle r="2.2" fill="currentColor" opacity="0.12"/>
|
||
<circle r="1.6" fill="currentColor" opacity="0.5"/>
|
||
<svg x="-1.5" y="-1.5" width="3" height="3" viewBox="0 0 24 24" fill="none" stroke="none">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="#4285F4" stroke-width="2" fill="#4285F4" fill-opacity="0.3" opacity="0.95"/>
|
||
</svg>
|
||
</g>
|
||
</svg>
|
||
<span>200px</span>
|
||
</div>
|
||
<!-- Theme color animated demos -->
|
||
<div style="display:flex;flex-direction:column;gap:20px;">
|
||
<div style="display:flex;gap:20px;align-items:center;">
|
||
<div style="color:#3B82F6;">
|
||
<svg viewBox="-1 -1 26 26" width="64" height="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.1"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.06;0.18;0.06"/></circle>
|
||
<circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.15;0.4;0.15"/></circle>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><animateMotion dur="8s" repeatCount="indefinite" path="M20,12 A8,3,0,0,0,4,12 A8,3,0,0,0,20,12"/><animate attributeName="opacity" dur="8s" repeatCount="indefinite" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#D97757" opacity="0.9"/></g>
|
||
<g><animateMotion dur="10s" repeatCount="indefinite" begin="-3s" path="M7.1,4.5 A8,3,30,0,1,16.9,19.5 A8,3,30,0,1,7.1,4.5"/><animate attributeName="opacity" dur="10s" repeatCount="indefinite" begin="-3s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#10A37F" opacity="0.9"/></g>
|
||
<g><animateMotion dur="12s" repeatCount="indefinite" begin="-5s" path="M16.9,4.5 A8,3,-30,0,1,7.1,19.5 A8,3,-30,0,1,16.9,4.5"/><animate attributeName="opacity" dur="12s" repeatCount="indefinite" begin="-5s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#4285F4" opacity="0.9"/></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:12px;opacity:0.5;">Brand Blue · 64px</span>
|
||
</div>
|
||
<div style="display:flex;gap:20px;align-items:center;">
|
||
<div style="color:#D97757;">
|
||
<svg viewBox="-1 -1 26 26" width="64" height="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.1"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.06;0.18;0.06"/></circle>
|
||
<circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.15;0.4;0.15"/></circle>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><animateMotion dur="8s" repeatCount="indefinite" path="M20,12 A8,3,0,0,0,4,12 A8,3,0,0,0,20,12"/><animate attributeName="opacity" dur="8s" repeatCount="indefinite" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#D97757" opacity="0.9"/></g>
|
||
<g><animateMotion dur="10s" repeatCount="indefinite" begin="-3s" path="M7.1,4.5 A8,3,30,0,1,16.9,19.5 A8,3,30,0,1,7.1,4.5"/><animate attributeName="opacity" dur="10s" repeatCount="indefinite" begin="-3s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#10A37F" opacity="0.9"/></g>
|
||
<g><animateMotion dur="12s" repeatCount="indefinite" begin="-5s" path="M16.9,4.5 A8,3,-30,0,1,7.1,19.5 A8,3,-30,0,1,16.9,4.5"/><animate attributeName="opacity" dur="12s" repeatCount="indefinite" begin="-5s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#4285F4" opacity="0.9"/></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:12px;opacity:0.5;">Claude · 64px</span>
|
||
</div>
|
||
<div style="display:flex;gap:20px;align-items:center;">
|
||
<div style="color:#8B5CF6;">
|
||
<svg viewBox="-1 -1 26 26" width="64" height="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke-width="0.9" opacity="0.15"/><path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke-width="0.9" opacity="0.15"/><path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke-width="0.9" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.1"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.06;0.18;0.06"/></circle>
|
||
<circle cx="12" cy="12" r="1" fill="currentColor" opacity="0.25"><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.15;0.4;0.15"/></circle>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke-width="1.3" opacity="0.75"/><path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke-width="1.3" opacity="0.75"/><path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke-width="1.3" opacity="0.75"/>
|
||
<g><animateMotion dur="8s" repeatCount="indefinite" path="M20,12 A8,3,0,0,0,4,12 A8,3,0,0,0,20,12"/><animate attributeName="opacity" dur="8s" repeatCount="indefinite" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#D97757" opacity="0.9"/></g>
|
||
<g><animateMotion dur="10s" repeatCount="indefinite" begin="-3s" path="M7.1,4.5 A8,3,30,0,1,16.9,19.5 A8,3,30,0,1,7.1,4.5"/><animate attributeName="opacity" dur="10s" repeatCount="indefinite" begin="-3s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#10A37F" opacity="0.9"/></g>
|
||
<g><animateMotion dur="12s" repeatCount="indefinite" begin="-5s" path="M16.9,4.5 A8,3,-30,0,1,7.1,19.5 A8,3,-30,0,1,16.9,4.5"/><animate attributeName="opacity" dur="12s" repeatCount="indefinite" begin="-5s" values="0.95;0.95;0.3;0.3;0.95" keyTimes="0;0.35;0.5;0.65;1"/><circle r="1.5" fill="#4285F4" opacity="0.9"/></g>
|
||
</svg>
|
||
</div>
|
||
<span style="font-size:12px;opacity:0.5;">Purple · 64px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- D1-V3: Sharp Circuit 锐利电路 -->
|
||
<div class="card">
|
||
<h2>D1-V3: Sharp Circuit</h2>
|
||
<div class="zh">锐利电路 — 虚线轨道 + 方头端点 + 菱形节点</div>
|
||
<div class="desc">
|
||
Dashed orbit lines (stroke-dasharray: 3 1.5) with butt linecaps for a technical/circuit feel.
|
||
Agent markers as rotated squares (diamonds). Core is a solid blue square with white center cross.
|
||
Precise, geometric, structured.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none">
|
||
<!-- Core - square with cross -->
|
||
<rect x="9.8" y="9.8" width="4.4" height="4.4" rx="0.5" fill="#3B82F6"/>
|
||
<line x1="12" y1="10.5" x2="12" y2="13.5" stroke="white" stroke-width="0.5" stroke-linecap="butt"/>
|
||
<line x1="10.5" y1="12" x2="13.5" y2="12" stroke="white" stroke-width="0.5" stroke-linecap="butt"/>
|
||
<!-- Orbit 1 - dashed -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.15"/>
|
||
<!-- Orbit 2 - dashed -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.85"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.15"/>
|
||
<!-- Orbit 3 - dashed -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.85"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="butt" stroke-dasharray="3 1.5" opacity="0.15"/>
|
||
<!-- Agent dots - diamond shapes -->
|
||
<rect x="15.7" y="9.2" width="2.6" height="2.6" rx="0.2" fill="#D97757" transform="rotate(45 17 10.5)"/>
|
||
<rect x="6.7" y="14.7" width="2.6" height="2.6" rx="0.2" fill="#10A37F" transform="rotate(45 8 16)"/>
|
||
<rect x="12.7" y="4.2" width="2.6" height="2.6" rx="0.2" fill="#4285F4" transform="rotate(45 14 5.5)"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none">
|
||
<rect x="9.8" y="9.8" width="4.4" height="4.4" rx="0.5" fill="#3B82F6"/>
|
||
<line x1="12" y1="10.5" x2="12" y2="13.5" stroke="white" stroke-width="0.5"/>
|
||
<line x1="10.5" y1="12" x2="13.5" y2="12" stroke="white" stroke-width="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.12"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.12"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.12"/>
|
||
<rect x="15.7" y="9.2" width="2.6" height="2.6" rx="0.2" fill="#D97757" transform="rotate(45 17 10.5)"/>
|
||
<rect x="6.7" y="14.7" width="2.6" height="2.6" rx="0.2" fill="#10A37F" transform="rotate(45 8 16)"/>
|
||
<rect x="12.7" y="4.2" width="2.6" height="2.6" rx="0.2" fill="#4285F4" transform="rotate(45 14 5.5)"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
|
||
<rect x="10" y="10" width="4" height="4" rx="0.3" fill="#3B82F6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.6" stroke-linecap="butt" stroke-dasharray="2 1.2"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.6" stroke-linecap="butt" stroke-dasharray="2 1.2"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.6" stroke-linecap="butt" stroke-dasharray="2 1.2"/>
|
||
<rect x="15.8" y="9.3" width="2.4" height="2.4" fill="#D97757" transform="rotate(45 17 10.5)"/>
|
||
<rect x="6.8" y="14.8" width="2.4" height="2.4" fill="#10A37F" transform="rotate(45 8 16)"/>
|
||
<rect x="12.8" y="4.3" width="2.4" height="2.4" fill="#4285F4" transform="rotate(45 14 5.5)"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none">
|
||
<rect x="10" y="10" width="4" height="4" rx="0.3" fill="#3B82F6"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#3B82F6" stroke-width="2" stroke-dasharray="2 1"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#3B82F6" stroke-width="2" stroke-dasharray="2 1"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#3B82F6" stroke-width="2" stroke-dasharray="2 1"/>
|
||
<rect x="15.8" y="8.8" width="2.4" height="2.4" fill="#D97757" transform="rotate(45 17 10)"/>
|
||
<rect x="6.8" y="14.8" width="2.4" height="2.4" fill="#10A37F" transform="rotate(45 8 16)"/>
|
||
<rect x="12.8" y="3.8" width="2.4" height="2.4" fill="#4285F4" transform="rotate(45 14 5)"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D1-V4: Soft Aura 柔和光晕 -->
|
||
<div class="card">
|
||
<h2>D1-V4: Soft Aura</h2>
|
||
<div class="zh">柔和光晕 — 柔色轨道 + 模糊光晕核心 + 淡化圆点</div>
|
||
<div class="desc">
|
||
Muted blue orbits (#7AAFEF) with thicker, softer strokes (1.5).
|
||
Core features a blurred white glow (feGaussianBlur) creating an aura effect.
|
||
Agent dots use desaturated pastel versions of their colors with larger radius.
|
||
Peaceful, harmonious, inclusive.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<defs>
|
||
<filter id="d1v4_glow" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/>
|
||
</filter>
|
||
</defs>
|
||
<!-- Core aura -->
|
||
<circle cx="12" cy="12" r="3" fill="white" opacity="0.35" filter="url(#d1v4_glow)"/>
|
||
<!-- Core solid -->
|
||
<circle cx="12" cy="12" r="2.2" fill="#7AAFEF"/>
|
||
<circle cx="12" cy="12" r="1.3" fill="white" opacity="0.7"/>
|
||
<!-- Orbit 1 -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#7AAFEF" stroke-width="1.5" opacity="0.12"/>
|
||
<!-- Orbit 2 -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.12"/>
|
||
<!-- Orbit 3 -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.12"/>
|
||
<!-- Agent dots - pastel/muted -->
|
||
<circle cx="17" cy="10.5" r="2.2" fill="#E8B4A0" opacity="0.8"/>
|
||
<circle cx="8" cy="16" r="2.2" fill="#7BCDB3" opacity="0.8"/>
|
||
<circle cx="14" cy="5.5" r="2.2" fill="#8CB8F8" opacity="0.8"/>
|
||
<!-- Dot inner glow -->
|
||
<circle cx="16.6" cy="10.1" r="0.7" fill="white" opacity="0.5"/>
|
||
<circle cx="7.6" cy="15.6" r="0.7" fill="white" opacity="0.5"/>
|
||
<circle cx="13.6" cy="5.1" r="0.7" fill="white" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="d1v4_glow2" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
|
||
</filter>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.8" fill="white" opacity="0.3" filter="url(#d1v4_glow2)"/>
|
||
<circle cx="12" cy="12" r="2.2" fill="#7AAFEF"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#7AAFEF" stroke-width="1.5" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#E8B4A0" opacity="0.8"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#7BCDB3" opacity="0.8"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#8CB8F8" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="#7AAFEF"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#7AAFEF" stroke-width="1.7" opacity="0.5"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#7AAFEF" stroke-width="1.7" opacity="0.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#7AAFEF" stroke-width="1.7" opacity="0.5"/>
|
||
<circle cx="17" cy="10.5" r="1.7" fill="#E8B4A0"/>
|
||
<circle cx="8" cy="16" r="1.7" fill="#7BCDB3"/>
|
||
<circle cx="14" cy="5.5" r="1.7" fill="#8CB8F8"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#7AAFEF"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" opacity="0.5"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#7AAFEF" stroke-width="2" opacity="0.5"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#7AAFEF" stroke-width="2" opacity="0.5"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#7AAFEF" stroke-width="2" opacity="0.5"/>
|
||
<circle cx="17" cy="10" r="2" fill="#E8B4A0"/>
|
||
<circle cx="8" cy="16" r="2" fill="#7BCDB3"/>
|
||
<circle cx="14" cy="5" r="2" fill="#8CB8F8"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- D1 Comparison -->
|
||
<div class="comparison">
|
||
<h2>D1 Variants Comparison (64px)</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="#3B82F6"/><circle cx="12" cy="12" r="1" fill="#93C5FD" opacity="0.6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.4" opacity="0.85"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>D1 Original</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="d1v1c_core" cx="50%" cy="45%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="100%" stop-color="#3B82F6" stop-opacity="0.8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#d1v1c_core)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#60A5FA" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#93C5FD" stroke-width="1.3" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>V1 Gradient</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" opacity="0.15"/>
|
||
<circle cx="12" cy="12" r="2.3" fill="#3B82F6" opacity="0.3"/>
|
||
<circle cx="12" cy="12" r="1.4" fill="white" opacity="0.8"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.1" opacity="0.5"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.1" opacity="0.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.1" opacity="0.5"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.75"/>
|
||
</svg>
|
||
</div>
|
||
<span>V2 Glassy</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box" style="border-color: #3B82F640;">
|
||
<svg viewBox="-1 -1 26 26" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="d1v2pc_blur" x="-80%" y="-80%" width="260%" height="260%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
|
||
</filter>
|
||
<radialGradient id="d1v2pc_sc" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#F5D5C5"/><stop offset="50%" stop-color="#D97757"/><stop offset="100%" stop-color="#9B4F30"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2pc_so" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#B8F0DD"/><stop offset="50%" stop-color="#10A37F"/><stop offset="100%" stop-color="#0B7A5C"/>
|
||
</radialGradient>
|
||
<radialGradient id="d1v2pc_sg" cx="38%" cy="30%" r="55%">
|
||
<stop offset="0%" stop-color="#C5DAF9"/><stop offset="50%" stop-color="#4285F4"/><stop offset="100%" stop-color="#2A5FC0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Back halves -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.2" opacity="0.25"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.2" opacity="0.25"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.2" opacity="0.25"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" opacity="0.2" filter="url(#d1v2pc_blur)"/>
|
||
<circle cx="12" cy="12" r="1.8" fill="#93C5FD" opacity="0.35" filter="url(#d1v2pc_blur)"/>
|
||
<circle cx="12" cy="12" r="1" fill="white" opacity="0.55" filter="url(#d1v2pc_blur)"/>
|
||
<!-- Front halves - solid -->
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.5" opacity="0.92"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.5" opacity="0.92"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.5" opacity="0.92"/>
|
||
<circle cx="17" cy="9.7" r="2" fill="url(#d1v2pc_sc)"/>
|
||
<svg x="15.2" y="7.9" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.9">
|
||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||
</svg>
|
||
<circle cx="8" cy="16" r="2" fill="url(#d1v2pc_so)"/>
|
||
<svg x="6.2" y="14.2" width="3.6" height="3.6" viewBox="0 0 16 16" fill="white" opacity="0.9">
|
||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||
</svg>
|
||
<circle cx="14" cy="5.5" r="2" fill="url(#d1v2pc_sg)"/>
|
||
<svg x="12.5" y="4" width="3" height="3" viewBox="0 0 24 24" fill="none" opacity="0.9">
|
||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="white" stroke-width="2" fill="white" fill-opacity="0.3"/>
|
||
</svg>
|
||
</svg>
|
||
</div>
|
||
<span>V2+ AI Icons</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none">
|
||
<rect x="10" y="10" width="4" height="4" rx="0.3" fill="#3B82F6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#3B82F6" stroke-width="1.3" stroke-linecap="butt" stroke-dasharray="2.5 1.5" opacity="0.85"/>
|
||
<rect x="15.7" y="9.2" width="2.6" height="2.6" rx="0.2" fill="#D97757" transform="rotate(45 17 10.5)"/>
|
||
<rect x="6.7" y="14.7" width="2.6" height="2.6" rx="0.2" fill="#10A37F" transform="rotate(45 8 16)"/>
|
||
<rect x="12.7" y="4.2" width="2.6" height="2.6" rx="0.2" fill="#4285F4" transform="rotate(45 14 5.5)"/>
|
||
</svg>
|
||
</div>
|
||
<span>V3 Circuit</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.2" fill="#7AAFEF"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.6"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#7AAFEF" stroke-width="1.5" opacity="0.6"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#E8B4A0" opacity="0.8"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#7BCDB3" opacity="0.8"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#8CB8F8" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
<span>V4 Soft Aura</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- D2 Optimized Variants (4 directions) -->
|
||
<!-- ============================================ -->
|
||
<div style="max-width: 1200px; margin: 80px auto 0;">
|
||
<h1 style="border-top: 2px solid #D97757; padding-top: 40px;">D2 Optimized Variants</h1>
|
||
<p class="subtitle">基于 D2 Synergistic Coexistence 的 4 种风格优化方向 — 颜色 / 透明度 / 圆角 / 线条</p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- D2-V1: Chromatic Pulse 彩韵律动 -->
|
||
<div class="card">
|
||
<h2>D2-V1: Chromatic Pulse</h2>
|
||
<div class="zh">彩韵律动 — 渐变色轨道 + 发光核心 + 饱和节点</div>
|
||
<div class="desc">
|
||
Each orbit uses a gradient from base color to a brighter tint:
|
||
Claude #D97757→#FF9977, OpenAI #10A37F→#33C6A0, Gemini #4285F4→#66A3FF.
|
||
Core is a radial gradient (white→brand blue). Dots enlarged with white borders. Vibrant and energetic.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<linearGradient id="d2v1_claude" x1="0" y1="12" x2="24" y2="12" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#D97757"/><stop offset="100%" stop-color="#FF9977"/>
|
||
</linearGradient>
|
||
<linearGradient id="d2v1_openai" x1="7" y1="4" x2="17" y2="20" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#10A37F"/><stop offset="100%" stop-color="#33C6A0"/>
|
||
</linearGradient>
|
||
<linearGradient id="d2v1_gemini" x1="17" y1="4" x2="7" y2="20" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#4285F4"/><stop offset="100%" stop-color="#66A3FF"/>
|
||
</linearGradient>
|
||
<radialGradient id="d2v1_core" cx="50%" cy="42%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.95"/>
|
||
<stop offset="55%" stop-color="#93C5FD" stop-opacity="0.5"/>
|
||
<stop offset="100%" stop-color="#3B82F6" stop-opacity="0.85"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Core glow ring -->
|
||
<circle cx="12" cy="12" r="3.8" fill="none" stroke="#3B82F6" stroke-width="0.3" opacity="0.2"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#d2v1_core)"/>
|
||
<!-- Orbit 1 - Claude gradient -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="url(#d2v1_claude)" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.3" opacity="0.12"/>
|
||
<!-- Orbit 2 - OpenAI gradient -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="url(#d2v1_openai)" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.3" opacity="0.12"/>
|
||
<!-- Orbit 3 - Gemini gradient -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="url(#d2v1_gemini)" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.3" opacity="0.12"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.5"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="d2v1_cores" cx="50%" cy="42%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="100%" stop-color="#3B82F6" stop-opacity="0.8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#d2v1_cores)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.4" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" opacity="0.1"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.6" fill="#3B82F6"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.7"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FF9977" stroke-width="1.6"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#33C6A0" stroke-width="1.6"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#66A3FF" stroke-width="1.6"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#D97757"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#10A37F"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="2.2"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2.2"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2.2"/>
|
||
<circle cx="17" cy="10" r="2" fill="#D97757"/>
|
||
<circle cx="8" cy="16" r="2" fill="#10A37F"/>
|
||
<circle cx="14" cy="5" r="2" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-V2: Layered Harmony 分层和声 -->
|
||
<div class="card">
|
||
<h2>D2-V2: Layered Harmony</h2>
|
||
<div class="zh">分层和声 — 半透明色轨道 + 分层核心 + 柔光圆点</div>
|
||
<div class="desc">
|
||
Orbits at 45% opacity with round joins, creating gentle color blending at crossings.
|
||
Core uses layered semi-transparent circles (blue 70% + white 90%).
|
||
Agent dots at 70% opacity with round edges. Harmonic, layered depth.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Core - layered -->
|
||
<circle cx="12" cy="12" r="3.5" fill="#3B82F6" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="#3B82F6" opacity="0.55"/>
|
||
<circle cx="12" cy="12" r="1.4" fill="white" opacity="0.9"/>
|
||
<!-- Orbit 1 - Claude -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.1" opacity="0.45"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.1" opacity="0.1"/>
|
||
<!-- Orbit 2 - OpenAI -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.1" opacity="0.45"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.1" opacity="0.1"/>
|
||
<!-- Orbit 3 - Gemini -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.1" opacity="0.45"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.1" opacity="0.1"/>
|
||
<!-- Agent dots -->
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.7"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.7"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.7"/>
|
||
<!-- Inner glow -->
|
||
<circle cx="16.6" cy="10.1" r="0.6" fill="white" opacity="0.45"/>
|
||
<circle cx="7.6" cy="15.6" r="0.6" fill="white" opacity="0.45"/>
|
||
<circle cx="13.6" cy="5.1" r="0.6" fill="white" opacity="0.45"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="2.3" fill="#3B82F6" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.3" fill="white" opacity="0.85"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.2" opacity="0.45"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.2" opacity="0.08"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.2" opacity="0.45"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.2" opacity="0.08"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.2" opacity="0.45"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.2" opacity="0.08"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.7"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.7"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.6" fill="#3B82F6" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.3" fill="white" opacity="0.8"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.5" opacity="0.45"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.5" opacity="0.45"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.5" opacity="0.45"/>
|
||
<circle cx="17" cy="10.5" r="1.5" fill="#D97757" opacity="0.7"/>
|
||
<circle cx="8" cy="16" r="1.5" fill="#10A37F" opacity="0.7"/>
|
||
<circle cx="14" cy="5.5" r="1.5" fill="#4285F4" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#3B82F6" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" opacity="0.7"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="2" opacity="0.45"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2" opacity="0.45"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2" opacity="0.45"/>
|
||
<circle cx="17" cy="10" r="2" fill="#D97757" opacity="0.65"/>
|
||
<circle cx="8" cy="16" r="2" fill="#10A37F" opacity="0.65"/>
|
||
<circle cx="14" cy="5" r="2" fill="#4285F4" opacity="0.65"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-V3: Precision Grid 精密网格 -->
|
||
<div class="card">
|
||
<h2>D2-V3: Precision Grid</h2>
|
||
<div class="zh">精密网格 — 双线轨道 + 方头端点 + 虚线细节</div>
|
||
<div class="desc">
|
||
Each orbit rendered as a solid outer line + thin dashed inner line for a technical double-border feel.
|
||
Butt linecaps for crisp, precise endings. Core is a blue ring with white center dot.
|
||
Agent markers as small squares with rounded corners. Engineered, systematic.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none">
|
||
<!-- Core - ring + dot -->
|
||
<circle cx="12" cy="12" r="2.8" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white"/>
|
||
<!-- Orbit 1 - Claude double line -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M4.2 11.2 A7.6 2.5 0 0 1 19.8 11.2" stroke="#D97757" stroke-width="0.3" stroke-linecap="butt" stroke-dasharray="1.5 1" opacity="0.4"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.3" stroke-linecap="butt" opacity="0.12"/>
|
||
<!-- Orbit 2 - OpenAI double line -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M7.5 5.2 A7.6 2.5 30 0 1 16.5 18.8" stroke="#10A37F" stroke-width="0.3" stroke-linecap="butt" stroke-dasharray="1.5 1" opacity="0.4"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.3" stroke-linecap="butt" opacity="0.12"/>
|
||
<!-- Orbit 3 - Gemini double line -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M16.5 5.2 A7.6 2.5 -30 0 1 7.5 18.8" stroke="#4285F4" stroke-width="0.3" stroke-linecap="butt" stroke-dasharray="1.5 1" opacity="0.4"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.3" stroke-linecap="butt" opacity="0.12"/>
|
||
<!-- Agent markers - rounded squares -->
|
||
<rect x="15.5" y="9" width="3" height="3" rx="0.6" fill="#D97757"/>
|
||
<rect x="6.5" y="14.5" width="3" height="3" rx="0.6" fill="#10A37F"/>
|
||
<rect x="12.5" y="4" width="3" height="3" rx="0.6" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none">
|
||
<circle cx="12" cy="12" r="2.6" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#D97757" stroke-width="1.4" stroke-linecap="butt" opacity="0.1"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.4" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#10A37F" stroke-width="1.4" stroke-linecap="butt" opacity="0.1"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.4" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#4285F4" stroke-width="1.4" stroke-linecap="butt" opacity="0.1"/>
|
||
<rect x="15.5" y="9" width="3" height="3" rx="0.5" fill="#D97757"/>
|
||
<rect x="6.5" y="14.5" width="3" height="3" rx="0.5" fill="#10A37F"/>
|
||
<rect x="12.5" y="4" width="3" height="3" rx="0.5" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
|
||
<circle cx="12" cy="12" r="2.4" fill="none" stroke="#3B82F6" stroke-width="1"/>
|
||
<circle cx="12" cy="12" r="1" fill="white"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.6" stroke-linecap="butt"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.6" stroke-linecap="butt"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.6" stroke-linecap="butt"/>
|
||
<rect x="15.7" y="9.2" width="2.6" height="2.6" rx="0.5" fill="#D97757"/>
|
||
<rect x="6.7" y="14.7" width="2.6" height="2.6" rx="0.5" fill="#10A37F"/>
|
||
<rect x="12.7" y="4.2" width="2.6" height="2.6" rx="0.5" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none">
|
||
<circle cx="12" cy="12" r="2.5" fill="none" stroke="#3B82F6" stroke-width="1.2"/>
|
||
<circle cx="12" cy="12" r="1" fill="white"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#D97757" stroke-width="2" stroke-linecap="butt"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#10A37F" stroke-width="2" stroke-linecap="butt"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#4285F4" stroke-width="2" stroke-linecap="butt"/>
|
||
<rect x="15.8" y="8.8" width="2.4" height="2.4" rx="0.4" fill="#D97757"/>
|
||
<rect x="6.8" y="14.8" width="2.4" height="2.4" rx="0.4" fill="#10A37F"/>
|
||
<rect x="12.8" y="3.8" width="2.4" height="2.4" rx="0.4" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- D2-V4: Ethereal Glow 空灵辉光 -->
|
||
<div class="card">
|
||
<h2>D2-V4: Ethereal Glow</h2>
|
||
<div class="zh">空灵辉光 — 去饱和柔色轨道 + 模糊光晕核心 + 淡色节点</div>
|
||
<div class="desc">
|
||
Orbits use pastel/desaturated versions of AI colors:
|
||
Claude #F1C2AF, OpenAI #B2D8C9, Gemini #A8C9F8. Low opacity (0.55).
|
||
Core has a radial glow from white to transparent. Agent dots use near-white tints.
|
||
Dreamy, ethereal, futuristic.
|
||
</div>
|
||
<div class="preview-row">
|
||
<div class="preview-box">
|
||
<div class="size-128">
|
||
<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<defs>
|
||
<filter id="d2v4_glow" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.0"/>
|
||
</filter>
|
||
<radialGradient id="d2v4_core" cx="50%" cy="45%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.9"/>
|
||
<stop offset="70%" stop-color="#D0E4FF" stop-opacity="0.3"/>
|
||
<stop offset="100%" stop-color="#D0E4FF" stop-opacity="0"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<!-- Core aura -->
|
||
<circle cx="12" cy="12" r="4" fill="white" opacity="0.2" filter="url(#d2v4_glow)"/>
|
||
<!-- Core -->
|
||
<circle cx="12" cy="12" r="2.5" fill="url(#d2v4_core)"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.85"/>
|
||
<!-- Orbit 1 - Claude pastel -->
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#F1C2AF" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F1C2AF" stroke-width="1.4" opacity="0.08"/>
|
||
<!-- Orbit 2 - OpenAI pastel -->
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#B2D8C9" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#B2D8C9" stroke-width="1.4" opacity="0.08"/>
|
||
<!-- Orbit 3 - Gemini pastel -->
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A8C9F8" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#A8C9F8" stroke-width="1.4" opacity="0.08"/>
|
||
<!-- Agent dots - near white with color tint -->
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#F5DDD2" opacity="0.8"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#D0EAE0" opacity="0.8"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#C8DBFA" opacity="0.8"/>
|
||
<!-- Inner glow dots -->
|
||
<circle cx="16.6" cy="10.1" r="0.7" fill="white" opacity="0.6"/>
|
||
<circle cx="7.6" cy="15.6" r="0.7" fill="white" opacity="0.6"/>
|
||
<circle cx="13.6" cy="5.1" r="0.7" fill="white" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<span>128px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-48">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<filter id="d2v4_glow2" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.8"/>
|
||
</filter>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="3" fill="white" opacity="0.15" filter="url(#d2v4_glow2)"/>
|
||
<circle cx="12" cy="12" r="2.3" fill="#E8F0FE" opacity="0.4"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.8"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#F1C2AF" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M20 12 A8 3 0 0 1 4 12" stroke="#F1C2AF" stroke-width="1.4" opacity="0.06"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#B2D8C9" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M16.9 19.5 A8 3 30 0 1 7.1 4.5" stroke="#B2D8C9" stroke-width="1.4" opacity="0.06"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A8C9F8" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M7.1 19.5 A8 3 -30 0 1 16.9 4.5" stroke="#A8C9F8" stroke-width="1.4" opacity="0.06"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#F5DDD2" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#D0EAE0" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#C8DBFA" opacity="0.75"/>
|
||
</svg>
|
||
</div>
|
||
<span>48px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-24">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.5" fill="#E8F0FE" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.3" fill="white" opacity="0.7"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#F1C2AF" stroke-width="1.6" opacity="0.5"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#B2D8C9" stroke-width="1.6" opacity="0.5"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A8C9F8" stroke-width="1.6" opacity="0.5"/>
|
||
<circle cx="17" cy="10.5" r="1.6" fill="#F5DDD2"/>
|
||
<circle cx="8" cy="16" r="1.6" fill="#D0EAE0"/>
|
||
<circle cx="14" cy="5.5" r="1.6" fill="#C8DBFA"/>
|
||
</svg>
|
||
</div>
|
||
<span>24px</span>
|
||
</div>
|
||
<div class="preview-box">
|
||
<div class="size-16">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" fill="#E8F0FE" opacity="0.4"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="white" opacity="0.6"/>
|
||
<path d="M5 12 A7 2.5 0 0 1 19 12" stroke="#F1C2AF" stroke-width="2" opacity="0.5"/>
|
||
<path d="M7.5 5 A7 2.5 30 0 1 16.5 19" stroke="#B2D8C9" stroke-width="2" opacity="0.5"/>
|
||
<path d="M16.5 5 A7 2.5 -30 0 1 7.5 19" stroke="#A8C9F8" stroke-width="2" opacity="0.5"/>
|
||
<circle cx="17" cy="10" r="2" fill="#F5DDD2"/>
|
||
<circle cx="8" cy="16" r="2" fill="#D0EAE0"/>
|
||
<circle cx="14" cy="5" r="2" fill="#C8DBFA"/>
|
||
</svg>
|
||
</div>
|
||
<span>16px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- D2 Comparison -->
|
||
<div class="comparison">
|
||
<h2>D2 Variants Comparison (64px)</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.4" fill="#3B82F6"/><circle cx="12" cy="12" r="1.2" fill="white" opacity="0.5"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.4" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.4" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>D2 Original</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<defs>
|
||
<radialGradient id="d2v1c_core" cx="50%" cy="42%" r="50%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.9"/><stop offset="100%" stop-color="#3B82F6" stop-opacity="0.8"/>
|
||
</radialGradient>
|
||
</defs>
|
||
<circle cx="12" cy="12" r="2.6" fill="url(#d2v1c_core)"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#FF9977" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#33C6A0" stroke-width="1.3" opacity="0.9"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#66A3FF" stroke-width="1.3" opacity="0.9"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#D97757" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#10A37F" stroke="white" stroke-width="0.4"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#4285F4" stroke="white" stroke-width="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<span>V1 Chromatic</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="3.2" fill="#3B82F6" opacity="0.12"/>
|
||
<circle cx="12" cy="12" r="2.3" fill="#3B82F6" opacity="0.5"/>
|
||
<circle cx="12" cy="12" r="1.3" fill="white" opacity="0.85"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.1" opacity="0.45"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.1" opacity="0.45"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.1" opacity="0.45"/>
|
||
<circle cx="17" cy="10.5" r="1.8" fill="#D97757" opacity="0.7"/>
|
||
<circle cx="8" cy="16" r="1.8" fill="#10A37F" opacity="0.7"/>
|
||
<circle cx="14" cy="5.5" r="1.8" fill="#4285F4" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<span>V2 Layered</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none">
|
||
<circle cx="12" cy="12" r="2.6" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#D97757" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#10A37F" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#4285F4" stroke-width="1.3" stroke-linecap="butt" opacity="0.85"/>
|
||
<rect x="15.5" y="9" width="3" height="3" rx="0.5" fill="#D97757"/>
|
||
<rect x="6.5" y="14.5" width="3" height="3" rx="0.5" fill="#10A37F"/>
|
||
<rect x="12.5" y="4" width="3" height="3" rx="0.5" fill="#4285F4"/>
|
||
</svg>
|
||
</div>
|
||
<span>V3 Precision</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="2.3" fill="#E8F0FE" opacity="0.4"/>
|
||
<circle cx="12" cy="12" r="1.2" fill="white" opacity="0.8"/>
|
||
<path d="M4 12 A8 3 0 0 1 20 12" stroke="#F1C2AF" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M7.1 4.5 A8 3 30 0 1 16.9 19.5" stroke="#B2D8C9" stroke-width="1.4" opacity="0.55"/>
|
||
<path d="M16.9 4.5 A8 3 -30 0 1 7.1 19.5" stroke="#A8C9F8" stroke-width="1.4" opacity="0.55"/>
|
||
<circle cx="17" cy="10.5" r="2.0" fill="#F5DDD2" opacity="0.75"/>
|
||
<circle cx="8" cy="16" r="2.0" fill="#D0EAE0" opacity="0.75"/>
|
||
<circle cx="14" cy="5.5" r="2.0" fill="#C8DBFA" opacity="0.75"/>
|
||
</svg>
|
||
</div>
|
||
<span>V4 Ethereal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Current logo for reference -->
|
||
<div class="comparison" style="margin-top: 30px;">
|
||
<h2>Current CCW Logo (for reference)</h2>
|
||
<div class="compare-row">
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none">
|
||
<line x1="3" y1="6" x2="18" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="3" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="3" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="19" cy="17" r="3" fill="#22C55E"/>
|
||
</svg>
|
||
</div>
|
||
<span>Current Logo</span>
|
||
</div>
|
||
<div class="compare-item">
|
||
<div class="compare-box">
|
||
<svg viewBox="0 0 24 24" width="40" height="40" fill="none">
|
||
<line x1="3" y1="6" x2="18" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="3" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="3" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="19" cy="17" r="3" fill="#3B82F6"/>
|
||
</svg>
|
||
</div>
|
||
<span>Current Favicon</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|