mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
8ceae6d6fd
- Created a new document for custom skills development (`custom.md`) detailing the structure, creation, implementation, and best practices for developing custom CCW skills. - Added an index document (`index.md`) summarizing all built-in skills, their categories, and usage examples. - Introduced a reference guide (`reference.md`) providing a quick reference for all 33 built-in CCW skills, including triggers and purposes.
2181 lines
133 KiB
HTML
2181 lines
133 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>
|
||
|
||
<!-- 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>
|