Skip to content

Instantly share code, notes, and snippets.

@didier-durand

didier-durand/claude_sonnet_v4_weather_forecast.svg

Created June 17, 2025 04:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save didier-durand/047faadc8c673018903a231e84966235 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save didier-durand/047faadc8c673018903a231e84966235 to your computer and use it in GitHub Desktop.
Download ZIP
Weather forecast chart generated in SVG format by Anthropic's Claude Sonnet v4
Display the source blob
Display the rendered blob
Raw
claude_sonnet_v4_weather_forecast.svg
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="800" height="500" fill="url(#skyGradient)"/>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2C3E50">
Madison, Wisconsin - 7 Day Forecast
</text>
<!-- Days containers -->
<!-- Monday -->
<g id="monday">
<rect x="20" y="60" width="100" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="70" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">MON</text>
<!-- Partly sunny with clouds icon -->
<circle cx="70" cy="110" r="12" fill="#FFD700" opacity="0.8"/>
<path d="M55 120 Q45 115 45 105 Q45 95 55 90 Q65 85 75 90 Q85 95 85 105 Q85 115 75 120 Z" fill="#DDD" opacity="0.7"/>
<text x="70" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">85°</text>
<text x="70" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">65°</text>
<text x="70" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">20%</text>
<!-- Rain drops -->
<circle cx="60" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="70" cy="195" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="80" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
</g>
<!-- Tuesday -->
<g id="tuesday">
<rect x="135" y="60" width="100" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="185" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">TUE</text>
<!-- Partly sunny with storm clouds -->
<circle cx="185" cy="110" r="12" fill="#FFD700" opacity="0.6"/>
<path d="M170 120 Q160 115 160 105 Q160 95 170 90 Q180 85 190 90 Q200 95 200 105 Q200 115 190 120 Z" fill="#95A5A6"/>
<text x="185" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">86°</text>
<text x="185" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">68°</text>
<text x="185" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#E67E22">50%</text>
<!-- More rain drops -->
<circle cx="175" cy="190" r="1.5" fill="#3498DB"/>
<circle cx="185" cy="195" r="1.5" fill="#3498DB"/>
<circle cx="195" cy="190" r="1.5" fill="#3498DB"/>
<circle cx="180" cy="200" r="1.5" fill="#3498DB"/>
<circle cx="190" cy="205" r="1.5" fill="#3498DB"/>
</g>
<!-- Wednesday -->
<g id="wednesday">
<rect x="250" y="60" width="100" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="300" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">WED</text>
<!-- Storm clouds -->
<path d="M285 120 Q275 115 275 105 Q275 95 285 90 Q295 85 305 90 Q315 95 315 105 Q315 115 305 120 Z" fill="#7F8C8D"/>
<path d="M280 115 Q270 110 270 100 Q270 90 280 85 Q290 80 300 85 Q310 90 310 100 Q310 110 300 115 Z" fill="#95A5A6"/>
<text x="300" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">79°</text>
<text x="300" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">62°</text>
<text x="300" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#C0392B" font-weight="bold">80%</text>
<!-- Heavy rain -->
<circle cx="285" cy="190" r="1.5" fill="#3498DB"/>
<circle cx="295" cy="195" r="1.5" fill="#3498DB"/>
<circle cx="305" cy="190" r="1.5" fill="#3498DB"/>
<circle cx="290" cy="200" r="1.5" fill="#3498DB"/>
<circle cx="300" cy="205" r="1.5" fill="#3498DB"/>
<circle cx="310" cy="200" r="1.5" fill="#3498DB"/>
<circle cx="285" cy="210" r="1.5" fill="#3498DB"/>
<circle cx="305" cy="210" r="1.5" fill="#3498DB"/>
</g>
<!-- Thursday -->
<g id="thursday">
<rect x="365" y="60" width="100" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="415" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">THU</text>
<text x="415" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="9" fill="#8E44AD">Juneteenth</text>
<!-- Partly cloudy -->
<circle cx="415" cy="110" r="12" fill="#FFD700"/>
<path d="M400 118 Q395 115 395 108 Q395 101 400 98 Q405 95 410 98 Q415 101 415 108 Q415 115 410 118 Z" fill="#DDD" opacity="0.5"/>
<text x="415" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">79°</text>
<text x="415" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">60°</text>
<text x="415" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">20%</text>
<!-- Light rain -->
<circle cx="405" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="415" cy="195" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="425" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
</g>
<!-- Friday -->
<g id="friday">
<rect x="480" y="60" width="100" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="530" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">FRI</text>
<!-- Mostly sunny -->
<circle cx="530" cy="110" r="12" fill="#FFD700"/>
<path d="M520 118 Q518 115 518 112 Q518 109 520 106 Q522 103 525 106 Q528 109 528 112 Q528 115 525 118 Z" fill="#DDD" opacity="0.3"/>
<text x="530" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">83°</text>
<text x="530" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">63°</text>
<text x="530" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">20%</text>
<!-- Light rain -->
<circle cx="520" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="530" cy="195" r="1.5" fill="#3498DB" opacity="0.6"/>
<circle cx="540" cy="190" r="1.5" fill="#3498DB" opacity="0.6"/>
</g>
<!-- Saturday -->
<g id="saturday">
<rect x="595" y="60" width="85" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="637.5" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">SAT</text>
<!-- Sunny -->
<circle cx="637.5" cy="110" r="14" fill="#FFD700"/>
<!-- Sun rays -->
<line x1="637.5" y1="90" x2="637.5" y2="85" stroke="#FFD700" stroke-width="2"/>
<line x1="637.5" y1="130" x2="637.5" y2="135" stroke="#FFD700" stroke-width="2"/>
<line x1="617.5" y1="110" x2="612.5" y2="110" stroke="#FFD700" stroke-width="2"/>
<line x1="657.5" y1="110" x2="662.5" y2="110" stroke="#FFD700" stroke-width="2"/>
<text x="637.5" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">89°</text>
<text x="637.5" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">68°</text>
<text x="637.5" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#27AE60">0%</text>
</g>
<!-- Sunday -->
<g id="sunday">
<rect x="695" y="60" width="85" height="180" fill="#FFF" stroke="#DDD" stroke-width="2" rx="8"/>
<text x="737.5" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2C3E50">SUN</text>
<!-- Sunny -->
<circle cx="737.5" cy="110" r="14" fill="#FFD700"/>
<!-- Sun rays -->
<line x1="737.5" y1="90" x2="737.5" y2="85" stroke="#FFD700" stroke-width="2"/>
<line x1="737.5" y1="130" x2="737.5" y2="135" stroke="#FFD700" stroke-width="2"/>
<line x1="717.5" y1="110" x2="712.5" y2="110" stroke="#FFD700" stroke-width="2"/>
<line x1="757.5" y1="110" x2="762.5" y2="110" stroke="#FFD700" stroke-width="2"/>
<text x="737.5" y="140" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#E74C3C">89°</text>
<text x="737.5" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#3498DB">68°</text>
<text x="737.5" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" fill="#27AE60">0%</text>
</g>
<!-- Temperature trend line -->
<polyline points="70,285 185,283 300,295 415,295 530,290 637.5,275 737.5,275"
fill="none" stroke="#E74C3C" stroke-width="3" opacity="0.7"/>
<!-- Temperature scale -->
<text x="20" y="270" font-family="Arial, sans-serif" font-size="12" fill="#2C3E50">Temp °F</text>
<text x="20" y="285" font-family="Arial, sans-serif" font-size="10" fill="#E74C3C">90°</text>
<text x="20" y="295" font-family="Arial, sans-serif" font-size="10" fill="#E74C3C">80°</text>
<text x="20" y="305" font-family="Arial, sans-serif" font-size="10" fill="#3498DB">70°</text>
<text x="20" y="315" font-family="Arial, sans-serif" font-size="10" fill="#3498DB">60°</text>
<!-- Precipitation chance bar graph -->
<text x="20" y="340" font-family="Arial, sans-serif" font-size="12" fill="#2C3E50">Rain Chance</text>
<!-- Precipitation bars -->
<rect x="65" y="360" width="10" height="8" fill="#3498DB" opacity="0.6"/> <!-- Mon 20% -->
<rect x="180" y="348" width="10" height="20" fill="#E67E22"/> <!-- Tue 50% -->
<rect x="295" y="336" width="10" height="32" fill="#C0392B"/> <!-- Wed 80% -->
<rect x="410" y="360" width="10" height="8" fill="#3498DB" opacity="0.6"/> <!-- Thu 20% -->
<rect x="525" y="360" width="10" height="8" fill="#3498DB" opacity="0.6"/> <!-- Fri 20% -->
<rect x="632.5" y="368" width="10" height="0" fill="#27AE60"/> <!-- Sat 0% -->
<rect x="732.5" y="368" width="10" height="0" fill="#27AE60"/> <!-- Sun 0% -->
<!-- Legend -->
<g id="legend">
<text x="20" y="410" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#2C3E50">Legend:</text>
<circle cx="30" cy="425" r="6" fill="#FFD700"/>
<text x="45" y="430" font-family="Arial, sans-serif" font-size="11" fill="#2C3E50">Sunny</text>
<path d="M80 432 Q75 430 75 425 Q75 420 80 418 Q85 416 90 418 Q95 420 95 425 Q95 430 90 432 Z" fill="#DDD"/>
<text x="105" y="430" font-family="Arial, sans-serif" font-size="11" fill="#2C3E50">Cloudy</text>
<circle cx="160" cy="425" r="1.5" fill="#3498DB"/>
<circle cx="165" cy="427" r="1.5" fill="#3498DB"/>
<circle cx="170" cy="425" r="1.5" fill="#3498DB"/>
<text x="180" y="430" font-family="Arial, sans-serif" font-size="11" fill="#2C3E50">Rain</text>
<text x="250" y="430" font-family="Arial, sans-serif" font-size="11" fill="#E74C3C">High Temp</text>
<text x="330" y="430" font-family="Arial, sans-serif" font-size="11" fill="#3498DB">Low Temp</text>
</g>
<!-- Weather summary -->
<text x="400" y="460" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#2C3E50">
Peak rain Wednesday (80%), clearing and warming for sunny weekend
</text>
<!-- Current conditions box -->
<rect x="500" y="300" width="280" height="90" fill="#F8F9FA" stroke="#DDD" stroke-width="1" rx="5"/>
<text x="510" y="320" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#2C3E50">Current: 60°F</text>
<text x="510" y="335" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">Mostly cloudy, SE wind 5mph</text>
<text x="510" y="350" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">Slight chance storms before 5am</text>
<text x="510" y="365" font-family="Arial, sans-serif" font-size="11" fill="#7F8C8D">Today: Partly sunny, high 85°F</text>
<text x="510" y="380" font-family="Arial, sans-serif" font-size="11" fill="#8E44AD">Data: Jun 16, 2025 7:15 AM</text>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment