feat(mini-program): 添加情绪博物馆主题 Logo

设计理念:情绪圣殿 - 情绪是内心的圣殿,需要被尊重和探索

设计元素:
- 背景:紫色渐变圆角正方形 (#A855F7 → #9333EA → #7C3AED)
- 神殿柱廊:三根柱子,代表情绪的多维度
- 中心核心:发光的椭圆,象征情绪核心
- 顶部星芒:呼应应用"星海"概念
- 四角星光:点缀装饰

配色严格使用项目主题色:
- #A855F7: 主紫色
- #9333EA: 深紫色
- #7C3AED: 更深紫色
- #C084FC: 浅紫色
- #E879F9: 粉紫色
This commit is contained in:
2026-04-07 22:47:34 +08:00
parent 8338204bcc
commit ec7c07d187
+52 -25
View File
@@ -1,12 +1,28 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#a78bfa;stop-opacity:1" />
<stop offset="50%" style="stop-color:#7c3aed;stop-opacity:1" />
<stop offset="100%" style="stop-color:#5b21b6;stop-opacity:1" />
<!-- 主渐变:使用项目主题色 -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#A855F7;stop-opacity:1" />
<stop offset="50%" style="stop-color:#9333EA;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="20" result="coloredBlur"/>
<!-- 柱廊渐变 -->
<linearGradient id="pillarGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C084FC;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.7" />
</linearGradient>
<!-- 核心发光渐变 -->
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#E879F9;stop-opacity:1" />
<stop offset="50%" style="stop-color:#A855F7;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0" />
</radialGradient>
<!-- 发光滤镜 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="15" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
@@ -14,27 +30,38 @@
</filter>
</defs>
<!-- Background -->
<rect width="1024" height="1024" rx="200" fill="url(#logoGradient)" filter="url(#glow)"/>
<!-- 背景圆角正方形 -->
<rect x="40" y="40" width="944" height="944" rx="200" fill="url(#bgGradient)"/>
<!-- Inner Design - Abstract Mind/Brain Symbol -->
<circle cx="512" cy="512" r="280" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="8"/>
<circle cx="512" cy="512" r="200" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="8"/>
<circle cx="512" cy="512" r="120" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="8"/>
<!-- 背景光晕 -->
<circle cx="512" cy="512" r="300" fill="url(#coreGlow)" opacity="0.5"/>
<!-- Center Symbol - Spark/Star -->
<path d="M512 380 L540 480 L640 512 L540 544 L512 644 L484 544 L384 512 L484 480 Z"
fill="white" opacity="0.9" filter="url(#glow)"/>
<!-- 神殿柱廊:三根柱子 -->
<!-- 左柱 -->
<rect x="280" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/>
<!-- 中柱 -->
<rect x="482" y="280" width="60" height="464" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/>
<!-- 右柱 -->
<rect x="684" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" filter="url(#glow)"/>
<!-- Decorative Lines -->
<path d="M512 200 L512 280" stroke="rgba(255,255,255,0.6)" stroke-width="4" stroke-linecap="round"/>
<path d="M512 744 L512 824" stroke="rgba(255,255,255,0.6)" stroke-width="4" stroke-linecap="round"/>
<path d="M200 512 L280 512" stroke="rgba(255,255,255,0.6)" stroke-width="4" stroke-linecap="round"/>
<path d="M744 512 L824 512" stroke="rgba(255,255,255,0.6)" stroke-width="4" stroke-linecap="round"/>
<!-- 柱顶横梁 -->
<path d="M240 300 L784 300 L784 340 L240 340 Z" fill="url(#pillarGradient)" opacity="0.8"/>
<!-- Corner Accents -->
<path d="M280 280 L340 280 L280 340 Z" fill="rgba(255,255,255,0.4)"/>
<path d="M744 280 L684 280 L744 340 Z" fill="rgba(255,255,255,0.4)"/>
<path d="M280 744 L340 744 L280 684 Z" fill="rgba(255,255,255,0.4)"/>
<path d="M744 744 L684 744 L744 684 Z" fill="rgba(255,255,255,0.4)"/>
<!-- 中心情绪核心:发光的椭圆 -->
<ellipse cx="512" cy="540" rx="80" ry="100" fill="white" filter="url(#glow)" opacity="0.95"/>
<ellipse cx="512" cy="540" rx="50" ry="70" fill="url(#coreGlow)" filter="url(#glow)"/>
<!-- 顶部星芒:呼应星海概念 -->
<path d="M512 180 L524 220 L564 220 L532 244 L544 284 L512 260 L480 284 L492 244 L460 220 L500 220 Z"
fill="#E879F9" filter="url(#glow)"/>
<!-- 底部装饰弧线 -->
<path d="M320 780 Q512 840 704 780" stroke="#C084FC" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/>
<path d="M360 820 Q512 860 664 820" stroke="#C084FC" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.4"/>
<!-- 四角装饰:星光点缀 -->
<circle cx="160" cy="160" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/>
<circle cx="864" cy="160" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/>
<circle cx="160" cy="864" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/>
<circle cx="864" cy="864" r="8" fill="#C084FC" filter="url(#glow)" opacity="0.8"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB