MiMo v2.6 ProXiaomi

Here's a drawing to show her! Save the code below as seasons.svg and open it in any web browser to see the full illustration:

<svg viewBox="0 0 900 540" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="sg" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffee88"/>
      <stop offset="100%" stop-color="#ffaa00"/>
    </radialGradient>
    <radialGradient id="sgr" cx="50%" cy="50%" r="50%">
      <stop offset="30%" stop-color="#ffcc00" stop-opacity=".35"/>
      <stop offset="100%" stop-color="#ffcc00" stop-opacity="0"/>
    </radialGradient>
    <marker id="mO" markerWidth="9" markerHeight="6" refX="8" refY="3" orient="auto">
      <polygon points="0 0,9 3,0 6" fill="#ff8822"/>
    </marker>
    <marker id="mB" markerWidth="9" markerHeight="6" refX="8" refY="3" orient="auto">
      <polygon points="0 0,9 3,0 6" fill="#6699cc"/>
    </marker>
    <marker id="mW" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
      <polygon points="0 0,7 2.5,0 5" fill="rgba(255,255,255,.5)"/>
    </marker>
    <marker id="mR" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
      <polygon points="0 0,7 2.5,0 5" fill="#ff6666"/>
    </marker>
    <marker id="mC" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
      <polygon points="0 0,7 2.5,0 5" fill="#6688cc"/>
    </marker>
  </defs>

  <rect width="900" height="540" fill="#0b1a2e"/>

  <g fill="#fff" opacity=".55">
    <circle cx="38" cy="25" r="1.2"/><circle cx="95" cy="68" r=".8"/>
    <circle cx="178" cy="32" r="1"/><circle cx="250" cy="82" r=".7"/>
    <circle cx="335" cy="48" r="1.3"/><circle cx="415" cy="22" r=".9"/>
    <circle cx="520" cy="55" r="1.1"/><circle cx="605" cy="28" r=".8"/>
    <circle cx="690" cy="80" r="1"/><circle cx="770" cy="38" r="1.2"/>
    <circle cx="845" cy="65" r=".7"/><circle cx="875" cy="25" r="1"/>
    <circle cx="25" cy="125" r=".9"/><circle cx="115" cy="145" r="1.1"/>
    <circle cx="215" cy="115" r=".7"/><circle cx="365" cy="135" r="1"/>
    <circle cx="565" cy="130" r=".8"/><circle cx="715" cy="120" r="1.2"/>
    <circle cx="815" cy="150" r=".9"/><circle cx="880" cy="105" r=".8"/>
    <circle cx="55" cy="465" r="1"/><circle cx="155" cy="485" r=".7"/>
    <circle cx="365" cy="475" r=".9"/><circle cx="565" cy="480" r="1.1"/>
    <circle cx="735" cy="470" r=".8"/><circle cx="860" cy="485" r="1"/>
    <circle cx="55" cy="375" r=".8"/><circle cx="885" cy="385" r=".9"/>
    <circle cx="845" cy="435" r=".7"/><circle cx="75" cy="415" r="1"/>
  </g>

  <text x="450" y="38" text-anchor="middle" fill="#fff" font-size="24" font-family="Verdana,Arial,sans-serif" font-weight="bold">🌍 Why do we have Summer &amp; Winter? ☀️❄️</text>

  <ellipse cx="450" cy="255" rx="275" ry="108" fill="none" stroke="#2a4a6a" stroke-width="1.8" stroke-dasharray="10,7" opacity=".45"/>

  <!-- SUN -->
  <circle cx="450" cy="255" r="100" fill="url(#sgr)"/>
  <circle cx="450" cy="255" r="55" fill="url(#sg)"/>
  <g stroke="#ffcc00" stroke-width="2.5" stroke-linecap="round" opacity=".5">
    <line x1="450" y1="185" x2="450" y2="167"/>
    <line x1="497" y1="208" x2="510" y2="194"/>
    <line x1="518" y1="255" x2="538" y2="255"/>
    <line x1="497" y1="302" x2="510" y2="316"/>
    <line x1="450" y1="325" x2="450" y2="343"/>
    <line x1="403" y1="302" x2="390" y2="316"/>
    <line x1="382" y1="255" x2="362" y2="255"/>
    <line x1="403" y1="208" x2="390" y2="194"/>
  </g>
  <circle cx="438" cy="247" r="3.5" fill="#cc7700"/>
  <circle cx="462" cy="247" r="3.5" fill="#cc7700"/>
  <path d="M436 267 Q450 280 464 267" fill="none" stroke="#cc7700" stroke-width="2.2" stroke-linecap="round"/>
  <text x="450" y="335" text-anchor="middle" fill="#ffdd44" font-size="13" font-family="Verdana,Arial" font-weight="bold">THE SUN</text>

  <!-- LEFT EARTH — SUMMER -->
  <circle cx="170" cy="255" r="52" fill="#152a44"/>
  <path d="M170 203 A52 52 0 0 1 170 307 Z" fill="#3388bb"/>
  <path d="M182 215 Q193 219 195 228 Q190 238 181 233 Q176 223 182 215Z" fill="#3a9955" opacity=".6"/>
  <path d="M188 262 Q199 266 200 275 Q195 285 186 279 Q182 270 188 262Z" fill="#3a9955" opacity=".6"/>
  <line x1="145" y1="312" x2="195" y2="198" stroke="#fff" stroke-width="2.3" stroke-dasharray="7,4.5" opacity=".85"/>
  <circle cx="195" cy="198" r="4.5" fill="#ff4444"/>
  <text x="201" y="195" fill="#ff8888" font-size="10.5" font-family="Arial" font-weight="bold">N</text>
  <line x1="202" y1="193" x2="258" y2="152" stroke="#77bbff" stroke-width="1.3" stroke-dasharray="3.5,3" marker-end="url(#mW)" opacity=".5"/>
  <text x="262" y="149" fill="#77bbff" font-size="9.5" font-family="Arial">⭐ North Star</text>
  <line x1="198" y1="196" x2="245" y2="190" stroke="#ff6666" stroke-width="1.5" marker-end="url(#mR)" opacity=".7"/>
  <text x="205" y="185" fill="#ff8888" font-size="8.5" font-family="Arial">tilts → toward Sun</text>
  <g stroke="#ff8822" stroke-width="2.8" marker-end="url(#mO)" opacity=".85">
    <line x1="388" y1="228" x2="225" y2="224"/>
    <line x1="388" y1="242" x2="223" y2="239"/>
    <line x1="388" y1="255" x2="223" y2="255"/>
    <line x1="388" y1="268" x2="223" y2="271"/>
    <line x1="388" y1="282" x2="225" y2="286"/>
  </g>
  <text x="300" y="218" fill="#ff8822" font-size="10" font-family="Arial" font-weight="bold">direct heat ☀️</text>
  <text x="170" y="382" text-anchor="middle" fill="#ffdd44" font-size="21" font-family="Verdana,Arial" font-weight="bold">☀️ SUMMER</text>
  <text x="170" y="404" text-anchor="middle" fill="#aad4ff" font-size="12.5" font-family="Verdana,Arial">Our half is tilted</text>
  <text x="170" y="421" text-anchor="middle" fill="#aad4ff" font-size="12.5" font-family="Verdana,Arial">TOWARD the Sun</text>
  <rect x="82" y="430" width="176" height="26" rx="5" fill="rgba(255,170,0,.12)" stroke="#dd8822" stroke-width="1"/>
  <text x="170" y="448" text-anchor="middle" fill="#ffaa33" font-size="12" font-family="Verdana,Arial">More light = HOT! 🥵</text>

  <!-- RIGHT EARTH — WINTER -->
  <circle cx="730" cy="255" r="52" fill="#152a44"/>
  <path d="M730 203 A52 52 0 0 0 730 307 Z" fill="#3388bb"/>
  <path d="M718 215 Q707 219 705 228 Q710 238 719 233 Q724 223 718 215Z" fill="#3a9955" opacity=".6"/>
  <path d="M712 262 Q701 266 700 275 Q705 285 714 279 Q718 270 712 262Z" fill="#3a9955" opacity=".6"/>
  <line x1="705" y1="312" x2="755" y2="198" stroke="#fff" stroke-width="2.3" stroke-dasharray="7,4.5" opacity=".85"/>
  <circle cx="755" cy="198" r="4.5" fill="#ff4444"/>
  <text x="761" y="195" fill="#ff8888" font-size="10.5" font-family="Arial" font-weight="bold">N</text>
  <line x1="762" y1="193" x2="818" y2="152" stroke="#77bbff" stroke-width="1.3" stroke-dasharray="3.5,3" marker-end="url(#mW)" opacity=".5"/>
  <text x="822" y="149" fill="#77bbff" font-size="9.5" font-family="Arial">⭐ North Star</text>
  <line x1="758" y1="196" x2="805" y2="190" stroke="#6688cc" stroke-width="1.5" marker-end="url(#mC)" opacity=".7"/>
  <text x="715" y="185" fill="#88aadd" font-size="8.5" font-family="Arial">tilts → away from Sun</text>
  <g stroke="#6699cc" stroke-width="1.8" marker-end="url(#mB)" opacity=".5">
    <line x1="512" y1="228" x2="675" y2="224"/>
    <line x1="512" y1="242" x2="677" y2="239"/>
    <line x1="512" y1="255" x2="677" y2="255"/>
    <line x1="512" y1="268" x2="677" y2="271"/>
    <line x1="512" y1="282" x2="675" y2="286"/>
  </g>
  <text x="575" y="218" fill="#6699cc" font-size="10" font-family="Arial" font-weight="bold">weak light 🌅</text>
  <text x="730" y="382" text-anchor="middle" fill="#88ccff" font-size="21" font-family="Verdana,Arial" font-weight="bold">❄️ WINTER</text>
  <text x="730" y="404" text-anchor="middle" fill="#aad4ff" font-size="12.5" font-family="Verdana,Arial">Our half is tilted</text>
  <text x="730" y="421" text-anchor="middle" fill="#aad4ff" font-size="12.5" font-family="Verdana,Arial">AWAY from the Sun</text>
  <rect x="642" y="430" width="176" height="26" rx="5" fill="rgba(100,180,255,.08)" stroke="#5577aa" stroke-width="1"/>
  <text x="730" y="448" text-anchor="middle" fill="#88bbff" font-size="12" font-family="Verdana,Arial">Less light = COLD! 🥶</text>

  <rect x="85" y="478" width="730" height="50" rx="8" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.12)" stroke-width="1"/>
  <text x="450" y="500" text-anchor="middle" fill="#cceeFF" font-size="13" font-family="Verdana,Arial">🔑 The tilt always points the same way! As Earth orbits the Sun, sometimes we lean toward it (summer)</text>
  <text x="450" y="518" text-anchor="middle" fill="#cceeFF" font-size="13" font-family="Verdana,Arial">and sometimes away (winter). That's why the seasons change! 🔄</text>
</svg>

How to explain it to her 🗣️

Earth is tilted! It doesn't spin straight up and down — it leans to one side, like a spinning top that's tipping over.

☀️ Summer: When our half of Earth leans toward the Sun, sunlight hits us straight on — like standing right under a flashlight. Lots of warmth!

❄️ Winter: When our half of Earth leans away from the Sun, sunlight hits us at a slant — like standing off to the side of a flashlight. Not as much warmth!

🔑 The cool part: The tilt never changes direction! But as Earth travels around the Sun, sometimes we're leaning toward it and sometimes away. That's why we get seasons!

A hands-on demo she'll love 🎉

This is the part that really sticks for kids:

1. Put a lamp in the middle of a table (the Sun)
2. Stick a pencil or skewer through a ball at a slight tilt (the tilted Earth)
3. Walk the ball in a circle around the lamp, keeping the pencil pointing the same direction the whole time
4. Watch how the tilted side faces the lamp on one side (summer) and faces away on the other (winter) 🤯

It's like walking in a circle around a campfire holding a tilted umbrella — when the tilted side faces the fire you're warm, and when it faces away you're cold. The umbrella never changes — just where you are in the circle!