mocode-pet-app 0.1.0 → 1.1.0

package/dist/assets/pets/04-robo-panda.svg

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#eef2f6"/>
+      <stop offset="1" stop-color="#cbd5e0"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Round black ears -->
+  <circle cx="58" cy="42" r="26" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="198" cy="42" r="26" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="28" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Black eye patches -->
+  <ellipse cx="93" cy="112" rx="22" ry="28" fill="#161a1e"/>
+  <ellipse cx="163" cy="112" rx="22" ry="28" fill="#161a1e"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose + mouth -->
+  <ellipse cx="128" cy="142" rx="8" ry="6" fill="#161a1e"/>
+  <rect x="112" y="150" width="32" height="5" rx="2.5" fill="#161a1e" fill-opacity="0.7"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/dist/assets/pets/05-robo-owl.svg

@@ -0,0 +1,46 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b388ff"/>
+      <stop offset="1" stop-color="#7c4dff"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Ear tufts -->
+  <path d="M60 58 L50 26 L76 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M196 58 L206 26 L180 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Big round eyes -->
+  <circle cx="93" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="163" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="93" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="163" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Beak -->
+  <path d="M120 156 L128 172 L136 156 Z" fill="#ffb74d"/>
+
+  <!-- Folded wing arms(填充块面而非线条,末端贴身收圆) -->
+  <ellipse cx="26" cy="160" rx="14" ry="30" transform="rotate(-12 26 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <ellipse cx="230" cy="160" rx="14" ry="30" transform="rotate(12 230 160)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Feet / talons -->
+  <rect x="76" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/dist/assets/pets/06-robo-bunny.svg

@@ -0,0 +1,57 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff6ec7"/>
+      <stop offset="1" stop-color="#f48fb1"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Long ears (top kept at y=12 to leave clearance for the idle float animation's -6px translateY, so ear tips don't get clipped by the viewBox edge) -->
+  <rect x="66" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="168" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="72" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+  <rect x="174" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ff6ec7" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose -->
+  <path d="M122 148 L128 156 L134 148 Z" fill="#ff6ec7" filter="url(#glow)"/>
+
+  <!-- Arms (gentle wave) -->
+  <ellipse cx="34" cy="150" rx="12" ry="22" transform="rotate(-18 34 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
+    <animateTransform attributeName="transform" type="rotate" values="-18 34 130;-30 34 130;-18 34 130;-6 34 130;-18 34 130" keyTimes="0;0.25;0.5;0.75;1" dur="2.6s" repeatCount="indefinite"/>
+  </ellipse>
+  <ellipse cx="222" cy="150" rx="12" ry="22" transform="rotate(18 222 130)" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5">
+    <animateTransform attributeName="transform" type="rotate" values="18 222 130;30 222 130;18 222 130;6 222 130;18 222 130" keyTimes="0;0.25;0.5;0.75;1" dur="2.6s" repeatCount="indefinite"/>
+  </ellipse>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/dist/assets/pets/07-robo-frog.svg

@@ -0,0 +1,39 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00e676"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body / head (wide, squat) -->
+  <rect x="34" y="66" width="188" height="134" rx="36" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Bulging top eyes -->
+  <circle cx="88" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="168" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="88" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="168" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Screen mouth panel -->
+  <rect x="60" y="110" width="136" height="72" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
+  <path d="M76 150 Q128 176 180 150" stroke="url(#accentGrad)" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Bent frog legs -->
+  <path d="M50 176 Q20 190 30 224 Q46 236 56 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M206 176 Q236 190 226 224 Q210 236 200 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  </g>
+</svg>

package/dist/assets/pets/08-robo-bear.svg

@@ -0,0 +1,48 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffb74d"/>
+      <stop offset="1" stop-color="#ffa726"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Round ears -->
+  <circle cx="56" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="200" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Round snout patch -->
+  <ellipse cx="128" cy="148" rx="26" ry="18" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.5" stroke-width="1.5"/>
+  <ellipse cx="128" cy="142" rx="6" ry="5" fill="#ffb74d"/>
+
+  <!-- Legs / feet -->
+  <rect x="72" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/dist/assets/pets/09-robo-penguin.svg

@@ -0,0 +1,49 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body (oval) -->
+  <ellipse cx="128" cy="140" rx="88" ry="100" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <!-- Belly patch -->
+  <ellipse cx="128" cy="156" rx="52" ry="66" fill="#eef2f6"/>
+
+  <!-- Screen face -->
+  <rect x="76" y="86" width="104" height="62" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="98" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="146" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Beak -->
+  <path d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
+
+  <!-- Flipper arms(填充块面而非线条,贴身收成圆润小翼) -->
+  <path d="M42 146 Q16 162 22 190 Q26 204 42 202 Q50 200 46 188 Q40 168 46 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+  <path d="M214 146 Q240 162 234 190 Q230 204 214 202 Q206 200 210 188 Q216 168 210 150 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2"/>
+
+  <!-- Feet -->
+  <ellipse cx="104" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  <ellipse cx="152" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  </g>
+</svg>

package/dist/assets/pets/10-robo-dino.svg

@@ -0,0 +1,58 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00c853"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Back spikes -->
+  <path d="M64 52 L76 24 L90 52 Z" fill="url(#accentGrad)"/>
+  <path d="M110 46 L122 16 L136 46 Z" fill="url(#accentGrad)"/>
+  <path d="M156 52 L168 24 L182 52 Z" fill="url(#accentGrad)"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="76" width="136" height="86" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Red eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Jagged mouth -->
+  <path d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Small arms(填充块面而非线条,末端一颗圆球小手) -->
+  <ellipse cx="31" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(-34 31 142)"/>
+  <circle cx="25" cy="156" r="5" fill="url(#accentGrad)"/>
+  <ellipse cx="223" cy="142" rx="5.5" ry="15" fill="url(#accentGrad)" transform="rotate(34 223 142)"/>
+  <circle cx="231" cy="156" r="5" fill="url(#accentGrad)"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Spiky tail -->
+  <path d="M216 176 Q248 178 244 150" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <path d="M240 150 L248 138 L252 154 Z" fill="url(#accentGrad)"/>
+  </g>
+</svg>

package/dist/assets/pets/11-slime-blob.svg

@@ -0,0 +1,43 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blobGrad" x1="48" y1="60" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#26c6da" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#00acc1" stop-opacity="0.75"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Blob body -->
+  <path d="M128 40
+           C182 40 214 78 210 128
+           C232 150 224 190 198 202
+           C210 224 176 232 158 216
+           C132 236 96 234 78 214
+           C50 224 34 196 48 176
+           C24 158 30 118 62 96
+           C64 62 96 40 128 40 Z"
+        fill="url(#blobGrad)" stroke="#4dd0e1" stroke-width="2.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="102" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="154" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="105" cy="129" r="2.5" fill="#e0fbff"/>
+    <circle cx="157" cy="129" r="2.5" fill="#e0fbff"/>
+  </g>
+
+  <!-- Smile -->
+  <path d="M110 156 Q128 170 146 156" stroke="#0a1420" stroke-width="3.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Drips -->
+  <path d="M84 216 Q84 232 92 232 Q100 232 96 216 Z" fill="url(#blobGrad)"/>
+  <path d="M160 220 Q160 236 168 236 Q176 236 172 220 Z" fill="url(#blobGrad)"/>
+
+  <!-- Highlight -->
+  <ellipse cx="92" cy="86" rx="18" ry="10" fill="#ffffff" fill-opacity="0.25"/>
+  </g>
+</svg>

package/dist/assets/pets/12-ghost-byte.svg

@@ -0,0 +1,41 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="ghostGrad" x1="48" y1="40" x2="208" y2="200" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e1f5fe" stop-opacity="0.92"/>
+      <stop offset="1" stop-color="#81d4fa" stop-opacity="0.7"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Floating shadow -->
+  <ellipse cx="128" cy="234" rx="50" ry="8" fill="#000" fill-opacity="0.15"/>
+
+  <!-- Ghost body -->
+  <path d="M128 34
+           C176 34 208 70 208 120
+           L208 190
+           C208 190 196 176 184 190
+           C172 204 160 176 148 190
+           C136 204 120 176 108 190
+           C96 204 84 176 72 190
+           C60 176 48 190 48 190
+           L48 120
+           C48 70 80 34 128 34 Z"
+        fill="url(#ghostGrad)" stroke="#4dd0e1" stroke-width="2">
+    <animateTransform attributeName="transform" type="translate" values="0 0;0 -8;0 0" dur="2.4s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <ellipse cx="98" cy="112" rx="9" ry="12" fill="#0a1420"/>
+    <ellipse cx="158" cy="112" rx="9" ry="12" fill="#0a1420"/>
+  </g>
+
+  <!-- Mouth -->
+  <ellipse cx="128" cy="142" rx="10" ry="8" fill="#0a1420" fill-opacity="0.85"/>
+  </g>
+</svg>

package/dist/assets/pets/13-cactus-bot.svg

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2e7d32"/>
+      <stop offset="1" stop-color="#1b5e20"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#aed581"/>
+      <stop offset="1" stop-color="#66bb6a"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Flower -->
+  <circle cx="108" cy="30" r="8" fill="#ff8a65"/>
+  <circle cx="122" cy="22" r="8" fill="#ffab91"/>
+  <circle cx="136" cy="30" r="8" fill="#ff8a65"/>
+  <circle cx="122" cy="34" r="7" fill="#ffe082"/>
+
+  <!-- Body segments -->
+  <rect x="60" y="46" width="136" height="120" rx="46" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="48" y="150" width="160" height="70" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Spike arms(填充块面而非线条,细刺仍保留为短线装饰) -->
+  <path d="M62 108 Q26 112 24 142 Q22 156 38 158 Q50 158 48 144 Q44 122 62 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <path d="M194 108 Q230 112 232 142 Q234 156 218 158 Q206 158 208 144 Q212 122 194 118 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <path d="M34 118 L24 108 M34 128 L22 124 M222 118 L232 108 M222 128 L234 124"
+        stroke="url(#accentGrad)" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Screen face -->
+  <rect x="80" y="76" width="96" height="66" rx="14" fill="#0a1420" stroke="#aed581" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="100" y="98" width="12" height="22" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="22;2;22" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="98;108;98" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="144" y="98" width="12" height="22" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="22;2;22" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="98;108;98" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Pot base / feet -->
+  <path d="M56 220 L200 220 L184 244 L72 244 Z" fill="#8d6e63" stroke="#a1887f" stroke-width="2"/>
+  </g>
+</svg>

package/dist/assets/pets/14-crystal-bot.svg

@@ -0,0 +1,32 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="crystalGrad" x1="48" y1="30" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b388ff" stop-opacity="0.85"/>
+      <stop offset="0.5" stop-color="#2afadf" stop-opacity="0.7"/>
+      <stop offset="1" stop-color="#7c4dff" stop-opacity="0.85"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Shadow (floating) -->
+  <ellipse cx="128" cy="236" rx="46" ry="8" fill="#000" fill-opacity="0.15"/>
+
+  <!-- Faceted crystal body -->
+  <path d="M128 26 L184 78 L168 190 L128 232 L88 190 L72 78 Z"
+        fill="url(#crystalGrad)" stroke="#e1bee7" stroke-width="2.5" filter="url(#glow)">
+    <animateTransform attributeName="transform" type="translate" values="0 0;0 -10;0 0" dur="3s" repeatCount="indefinite"/>
+  </path>
+  <!-- Inner facet lines -->
+  <line x1="128" y1="26" x2="128" y2="232" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+  <line x1="72" y1="78" x2="184" y2="78" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+  <line x1="88" y1="190" x2="168" y2="190" stroke="#ffffff" stroke-opacity="0.35" stroke-width="1.5"/>
+
+  <!-- Angular eyes -->
+  <path d="M100 110 L112 122 L100 134 L92 122 Z" fill="#0a1420"/>
+  <path d="M156 110 L168 122 L156 134 L148 122 Z" fill="#0a1420"/>
+  </g>
+</svg>

package/dist/assets/pets/15-satellite-bot.svg

@@ -0,0 +1,55 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Antenna dish (kept 8px lower than original so the dish curve's peak stays clear
+       of the viewBox top edge during the idle float animation's -6px translateY) -->
+  <line x1="128" y1="24" x2="128" y2="54" stroke="url(#accentGrad)" stroke-width="4"/>
+  <path d="M100 24 Q128 4 156 24 Q128 36 100 24 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Solar panel wings -->
+  <rect x="4" y="88" width="50" height="70" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <line x1="4" y1="105" x2="54" y2="105" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="4" y1="123" x2="54" y2="123" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="4" y1="141" x2="54" y2="141" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <rect x="202" y="88" width="50" height="70" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <line x1="202" y1="105" x2="252" y2="105" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="202" y1="123" x2="252" y2="123" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <line x1="202" y1="141" x2="252" y2="141" stroke="url(#accentGrad)" stroke-opacity="0.5" stroke-width="1.5"/>
+  <rect x="54" y="116" width="16" height="10" fill="url(#accentGrad)"/>
+  <rect x="186" y="116" width="16" height="10" fill="url(#accentGrad)"/>
+
+  <!-- Round body -->
+  <circle cx="128" cy="140" r="76" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="82" y="106" width="92" height="64" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="112" cy="138" r="9" fill="url(#accentGrad)">
+      <animate attributeName="r" values="9;2;9" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="144" cy="138" r="9" fill="url(#accentGrad)">
+      <animate attributeName="r" values="9;2;9" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Struts / feet -->
+  <line x1="106" y1="212" x2="90" y2="236" stroke="url(#accentGrad)" stroke-width="6" stroke-linecap="round"/>
+  <line x1="150" y1="212" x2="166" y2="236" stroke="url(#accentGrad)" stroke-width="6" stroke-linecap="round"/>
+  </g>
+</svg>