sundynix/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 添加「毛孩子计划」品牌 logo

Browse Source 
- 主图标 logo.svg：爱心 + 镂空爪印，暖橙渐变与 App 主色一致
- logo-lockup.svg：图标 + 中英文名称横版
- 导出 logo-512.png / logo-144.png（透明背景，小程序头像可直接用）
- options/ 保留 6 个候选方案与对比页，便于后续调整

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-25 15:59:17 +08:00
parent 28b95a6468
commit 3148c65cd7
11 changed files with 451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pets-fe/assets/logo-144.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

pets-fe/assets/logo-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

pets-fe/assets/logo-lockup.svg
+17
View File
@@ -0,0 +1,17 @@
<svg width="900" height="300" viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="毛孩子计划">
<defs><linearGradient id="bgL" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFD08A"/><stop offset="1" stop-color="#F49A38"/></linearGradient></defs>
<g transform="translate(40,30) scale(0.46)">
<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(#bgL)"/>
<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></g>
<text x="315" y="168" font-family="PingFang SC, Hiragino Sans GB, Microsoft YaHei, system-ui, sans-serif" font-size="96" font-weight="800" fill="#4A3524" letter-spacing="2">毛孩子计划</text>
<text x="318" y="222" font-family="Poppins, Montserrat, system-ui, sans-serif" font-size="30" font-weight="600" fill="#E08A2B" letter-spacing="8">FUR KIDS · CARE PLAN</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

pets-fe/assets/logo.svg
+13
View File
@@ -0,0 +1,13 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

pets-fe/assets/options/a-pawheart.svg
+12
View File
@@ -0,0 +1,12 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

pets-fe/assets/options/b-calendar.svg
+14
View File
@@ -0,0 +1,14 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

pets-fe/assets/options/c-catdog.svg
+11
View File
@@ -0,0 +1,11 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 967 B

pets-fe/assets/options/compare.html
+349
View File
@@ -0,0 +1,349 @@
<!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>
pets-fe/assets/options/d-heartpaw.svg
+13
View File
@@ -0,0 +1,13 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

pets-fe/assets/options/e-checkpaw.svg
+11
View File
@@ -0,0 +1,11 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 950 B

pets-fe/assets/options/f-home.svg
+11
View File
@@ -0,0 +1,11 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B