Files
sundynix-pets/pets-fe/assets/options/compare.html
T
Blizzard 3816cd1b02 chore: 小程序更名为「肉垫计划」
- 原名「毛孩子计划」在微信已被占用,全项目 24 处替换(导航标题、
  AI 提示词身份、社区官方号、后台登录页、logo 横版文案)
- logo 英文副标同步改为 PAW PAD · CARE PLAN
- 新增 小程序资料.md:后台要填的简介(多长度版本)、关键词、
  服务类目建议与审核避雷要点

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-25 16:46:21 +08:00

350 lines
28 KiB
HTML

<!doctype html><meta charset="utf-8"><title>肉垫计划 · Logo 方案</title>
<style>
body{margin:0;padding:32px;font-family:PingFang SC,system-ui,sans-serif;background:#FAF7F2;color:#3A2E23}
h1{font-size:22px;font-weight:600;margin:0 0 4px}
p.sub{margin:0 0 28px;color:#8A7A69;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:#fff;border:1px solid #EDE4D8;border-radius:16px;padding:20px;text-align:center}
.big svg{width:150px;height:150px;display:block;margin:0 auto}
.row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #F2EBE1}
.row svg{display:block}
.s72 svg{width:72px;height:72px}.s44 svg{width:44px;height:44px}.s28 svg{width:28px;height:28px}
.name{margin-top:14px;font-size:16px;font-weight:600}
.desc{margin-top:4px;font-size:13px;color:#8A7A69;line-height:1.5}
.tag{display:inline-block;margin-top:10px;font-size:11px;color:#B26A12;background:#FFF3E1;padding:3px 10px;border-radius:99px}
</style>
<h1>肉垫计划 · Logo 方案</h1>
<p class="sub">每个方案下方是 72 / 44 / 28px 小尺寸预览 —— 小程序里实际就这么大,先看小图能不能认出来</p>
<div class="grid">
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgA" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient>
<radialGradient id="glA" cx="0.5" cy="0.28" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".6" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgA)"/>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#glA)"/>
<g fill="#fff">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z"/>
</g></svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgA" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient>
<radialGradient id="glA" cx="0.5" cy="0.28" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".6" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgA)"/>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#glA)"/>
<g fill="#fff">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z"/>
</g></svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgA" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient>
<radialGradient id="glA" cx="0.5" cy="0.28" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".6" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgA)"/>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#glA)"/>
<g fill="#fff">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z"/>
</g></svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgA" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient>
<radialGradient id="glA" cx="0.5" cy="0.28" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity=".35"/><stop offset=".6" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgA)"/>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#glA)"/>
<g fill="#fff">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z"/>
</g></svg>
</span></div>
<div class="name">A · 爪心</div><div class="desc">爪印的主肉垫做成爱心 —— 宠物 + 用心照护,一眼看懂</div><div class="tag">最百搭</div></div>
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgB" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgB)"/>
<rect x="176" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="308" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="112" y="138" width="288" height="258" rx="40" fill="#fff"/>
<path d="M152 138 H360 A40 40 0 0 1 400 178 V196 H112 V178 A40 40 0 0 1 152 138 Z" fill="#E88A22"/>
<g fill="#F49A38" transform="translate(140.8,183.45) scale(0.45)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgB" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgB)"/>
<rect x="176" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="308" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="112" y="138" width="288" height="258" rx="40" fill="#fff"/>
<path d="M152 138 H360 A40 40 0 0 1 400 178 V196 H112 V178 A40 40 0 0 1 152 138 Z" fill="#E88A22"/>
<g fill="#F49A38" transform="translate(140.8,183.45) scale(0.45)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgB" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgB)"/>
<rect x="176" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="308" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="112" y="138" width="288" height="258" rx="40" fill="#fff"/>
<path d="M152 138 H360 A40 40 0 0 1 400 178 V196 H112 V178 A40 40 0 0 1 152 138 Z" fill="#E88A22"/>
<g fill="#F49A38" transform="translate(140.8,183.45) scale(0.45)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgB" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgB)"/>
<rect x="176" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="308" y="104" width="28" height="62" rx="14" fill="#fff"/>
<rect x="112" y="138" width="288" height="258" rx="40" fill="#fff"/>
<path d="M152 138 H360 A40 40 0 0 1 400 178 V196 H112 V178 A40 40 0 0 1 152 138 Z" fill="#E88A22"/>
<g fill="#F49A38" transform="translate(140.8,183.45) scale(0.45)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span></div>
<div class="name">B · 计划爪</div><div class="desc">日历卡片里嵌爪印,直接点题「计划」两个字</div><div class="tag">最点题</div></div>
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgC" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgC)"/>
<path d="M172 206 L150 104 L250 164 Z" fill="#fff"/>
<ellipse cx="358" cy="248" rx="42" ry="76" transform="rotate(20 358 248)" fill="#fff"/>
<circle cx="256" cy="288" r="112" fill="#fff"/>
<circle cx="216" cy="276" r="13" fill="#E88A22"/>
<circle cx="296" cy="276" r="13" fill="#E88A22"/>
<path d="M256 306 C268 306 274 314 268 322 C264 328 248 328 244 322 C238 314 244 306 256 306 Z" fill="#E88A22"/>
<path d="M256 324 V338 M256 338 C244 350 226 346 222 336 M256 338 C268 350 286 346 290 336" stroke="#E88A22" stroke-width="9" stroke-linecap="round" fill="none"/>
</svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgC" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgC)"/>
<path d="M172 206 L150 104 L250 164 Z" fill="#fff"/>
<ellipse cx="358" cy="248" rx="42" ry="76" transform="rotate(20 358 248)" fill="#fff"/>
<circle cx="256" cy="288" r="112" fill="#fff"/>
<circle cx="216" cy="276" r="13" fill="#E88A22"/>
<circle cx="296" cy="276" r="13" fill="#E88A22"/>
<path d="M256 306 C268 306 274 314 268 322 C264 328 248 328 244 322 C238 314 244 306 256 306 Z" fill="#E88A22"/>
<path d="M256 324 V338 M256 338 C244 350 226 346 222 336 M256 338 C268 350 286 346 290 336" stroke="#E88A22" stroke-width="9" stroke-linecap="round" fill="none"/>
</svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgC" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgC)"/>
<path d="M172 206 L150 104 L250 164 Z" fill="#fff"/>
<ellipse cx="358" cy="248" rx="42" ry="76" transform="rotate(20 358 248)" fill="#fff"/>
<circle cx="256" cy="288" r="112" fill="#fff"/>
<circle cx="216" cy="276" r="13" fill="#E88A22"/>
<circle cx="296" cy="276" r="13" fill="#E88A22"/>
<path d="M256 306 C268 306 274 314 268 322 C264 328 248 328 244 322 C238 314 244 306 256 306 Z" fill="#E88A22"/>
<path d="M256 324 V338 M256 338 C244 350 226 346 222 336 M256 338 C268 350 286 346 290 336" stroke="#E88A22" stroke-width="9" stroke-linecap="round" fill="none"/>
</svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgC" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgC)"/>
<path d="M172 206 L150 104 L250 164 Z" fill="#fff"/>
<ellipse cx="358" cy="248" rx="42" ry="76" transform="rotate(20 358 248)" fill="#fff"/>
<circle cx="256" cy="288" r="112" fill="#fff"/>
<circle cx="216" cy="276" r="13" fill="#E88A22"/>
<circle cx="296" cy="276" r="13" fill="#E88A22"/>
<path d="M256 306 C268 306 274 314 268 322 C264 328 248 328 244 322 C238 314 244 306 256 306 Z" fill="#E88A22"/>
<path d="M256 324 V338 M256 338 C244 350 226 346 222 336 M256 338 C268 350 286 346 290 336" stroke="#E88A22" stroke-width="9" stroke-linecap="round" fill="none"/>
</svg>
</span></div>
<div class="name">C · 半猫半狗</div><div class="desc">左边猫耳、右边狗耳,一张脸两种身份 = 所有毛孩子</div><div class="tag">最有记忆点</div></div>
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgD" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgD)"/>
<g transform="translate(-102.4,-187.6) scale(1.4)">
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z" fill="#fff"/>
</g>
<g fill="#F49A38" transform="translate(128,140.5) scale(0.5)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgD" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgD)"/>
<g transform="translate(-102.4,-187.6) scale(1.4)">
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z" fill="#fff"/>
</g>
<g fill="#F49A38" transform="translate(128,140.5) scale(0.5)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgD" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgD)"/>
<g transform="translate(-102.4,-187.6) scale(1.4)">
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z" fill="#fff"/>
</g>
<g fill="#F49A38" transform="translate(128,140.5) scale(0.5)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgD" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgD)"/>
<g transform="translate(-102.4,-187.6) scale(1.4)">
<path d="M256 418 C190 366,148 326,148 282 C148 251,173 231,202 231 C229 231,250 249,256 271 C262 249,283 231,310 231 C339 231,364 251,364 282 C364 326,322 366,256 418 Z" fill="#fff"/>
</g>
<g fill="#F49A38" transform="translate(128,140.5) scale(0.5)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span></div>
<div class="name">D · 心中有爪</div><div class="desc">满屏爱心,爪印镂空其中,形状最简、最像大厂 App</div><div class="tag">最简洁</div></div>
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgE" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgE)"/>
<path d="M132 286 L214 368 L330 232" stroke="#fff" stroke-width="46" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<g fill="#fff" transform="translate(298.08,92.12) scale(0.32)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgE" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgE)"/>
<path d="M132 286 L214 368 L330 232" stroke="#fff" stroke-width="46" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<g fill="#fff" transform="translate(298.08,92.12) scale(0.32)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgE" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgE)"/>
<path d="M132 286 L214 368 L330 232" stroke="#fff" stroke-width="46" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<g fill="#fff" transform="translate(298.08,92.12) scale(0.32)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgE" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgE)"/>
<path d="M132 286 L214 368 L330 232" stroke="#fff" stroke-width="46" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<g fill="#fff" transform="translate(298.08,92.12) scale(0.32)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span></div>
<div class="name">E · 打勾爪</div><div class="desc">对勾 + 爪印,强调每天完成任务的成就感</div><div class="tag">最强调习惯</div></div>
<div class="card"><div class="big">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgF" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgF)"/>
<path d="M238 116 C248 108 264 108 274 116 L404 224 C412 231 416 240 416 250 V378 C416 396 402 410 384 410 H128 C110 410 96 396 96 378 V250 C96 240 100 231 108 224 Z" fill="#fff"/>
<g fill="#F49A38" transform="translate(163.84,216.76) scale(0.36)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</div>
<div class="row"><span class="s72">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgF" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgF)"/>
<path d="M238 116 C248 108 264 108 274 116 L404 224 C412 231 416 240 416 250 V378 C416 396 402 410 384 410 H128 C110 410 96 396 96 378 V250 C96 240 100 231 108 224 Z" fill="#fff"/>
<g fill="#F49A38" transform="translate(163.84,216.76) scale(0.36)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s44">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgF" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgF)"/>
<path d="M238 116 C248 108 264 108 274 116 L404 224 C412 231 416 240 416 250 V378 C416 396 402 410 384 410 H128 C110 410 96 396 96 378 V250 C96 240 100 231 108 224 Z" fill="#fff"/>
<g fill="#F49A38" transform="translate(163.84,216.76) scale(0.36)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span><span class="s28">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs><linearGradient id="bgF" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<path d="M256 20 C 128 20, 20 128, 20 256 C 20 384, 128 492, 256 492 C 384 492, 492 384, 492 256 C 492 128, 384 20, 256 20 Z" fill="url(#bgF)"/>
<path d="M238 116 C248 108 264 108 274 116 L404 224 C412 231 416 240 416 250 V378 C416 396 402 410 384 410 H128 C110 410 96 396 96 378 V250 C96 240 100 231 108 224 Z" fill="#fff"/>
<g fill="#F49A38" transform="translate(163.84,216.76) scale(0.36)">
<ellipse cx="138" cy="222" rx="38" ry="47" transform="rotate(-20 138 222)"/>
<ellipse cx="214" cy="168" rx="40" ry="52" transform="rotate(-7 214 168)"/>
<ellipse cx="298" cy="168" rx="40" ry="52" transform="rotate(7 298 168)"/>
<ellipse cx="374" cy="222" rx="38" ry="47" transform="rotate(20 374 222)"/>
<ellipse cx="256" cy="320" rx="106" ry="82"/>
</g></svg>
</span></div>
<div class="name">F · 毛孩子的家</div><div class="desc">房子里的爪印,温暖的归属感</div><div class="tag">最温暖</div></div>
</div>