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 & 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:
- Put a lamp in the middle of a table (the Sun)
- Stick a pencil or skewer through a ball at a slight tilt (the tilted Earth)
- Walk the ball in a circle around the lamp, keeping the pencil pointing the same direction the whole time
- 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!