```svg
<svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">
<!-- Define common stroke properties -->
<defs>
<style>
.weather-icon {
stroke: #2c3e50;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.weather-fill {
fill: #2c3e50;
}
</style>
</defs>
<!-- Sun (0-100) -->
<g transform="translate(50, 60)">
<!-- Sun circle -->
<circle cx="0" cy="0" r="18" class="weather-icon"/>
<!-- Sun rays -->
<line x1="0" y1="-30" x2="0" y2="-38" class="weather-icon"/>
<line x1="0" y1="30" x2="0" y2="38" class="weather-icon"/>
<line x1="30" y1="0" x2="38" y2="0" class="weather-icon"/>
<line x1="-30" y1="0" x2="-38" y2="0" class="weather-icon"/>
<line x1="21.2" y1="-21.2" x2="26.9" y2="-26.9" class="weather-icon"/>
<line x1="-21.2" y1="21.2" x2="-26.9" y2="26.9" class="weather-icon"/>
<line x1="21.2" y1="21.2" x2="26.9" y2="26.9" class="weather-icon"/>
<line x1="-21.2" y1="-21.2" x2="-26.9" y2="-26.9" class="weather-icon"/>
</g>
<!-- Cloud (100-200) -->
<g transform="translate(150, 60)">
<path d="M -15 8 Q -20 8 -22 2 Q -25 -8 -15 -12 Q -8 -15 0 -12 Q 8 -14 12 -8 Q 18 -10 20 -2 Q 22 6 16 10 L -12 10 Q -15 10 -15 8" class="weather-icon"/>
</g>
<!-- Rain (200-300) -->
<g transform="translate(250, 60)">
<!-- Cloud -->
<path d="M -12 6 Q -16 6 -18 1 Q -20 -6 -12 -9 Q -6 -11 2 -9 Q 8 -10 11 -6 Q 15 -8 17 -2 Q 18 4 13 7 L -10 7 Q -12 7 -12 6" class="weather-icon"/>
<!-- Rain drops -->
<line x1="-8" y1="12" x2="-6" y2="20" class="weather-icon"/>
<line x1="0" y1="12" x2="2" y2="20" class="weather-icon"/>
<line x1="8" y1="12" x2="10" y2="20" class="weather-icon"/>
</g>
<!-- Snow (300-400) -->
<g transform="translate(350, 60)">
<!-- Cloud -->
<path d="M -12 6 Q -16 6 -18 1 Q -20 -6 -12 -9 Q -6 -11 2 -9 Q 8 -10 11 -6 Q 15 -8 17 -2 Q 18 4 13 7 L -10 7 Q -12 7 -12 6" class="weather-icon"/>
<!-- Snowflakes -->
<g transform="translate(-8, 16)">
<line x1="0" y1="-3" x2="0" y2="3" class="weather-icon"/>
<line x1="-3" y1="0" x2="3" y2="0" class="weather-icon"/>
<line x1="-2.1" y1="-2.1" x2="2.1" y2="2.1" class="weather-icon"/>
</g>
<g transform="translate(0, 16)">
<line x1="0" y1="-3" x2="0" y2="3" class="weather-icon"/>
<line x1="-3" y1="0" x2="3" y2="0" class="weather-icon"/>
<line x1="-2.1" y1="-2.1" x2="2.1" y2="2.1" class="weather-icon"/>
</g>
<g transform="translate(8, 16)">
<line x1="0" y1="-3" x2="0" y2="3" class="weather-icon"/>
<line x1="-3" y1="0" x2="3" y2="0" class="weather-icon"/>
<line x1="-2.1" y1="-2.1" x2="2.1" y2="2.1" class="weather-icon"/>
</g>
</g>
<!-- Fog (400-500) -->
<g transform="translate(450, 60)">
<!-- Cloud top -->
<path d="M -12 -2 Q -16 -2 -18 -7 Q -20 -14 -12 -17 Q -6 -19 2 -17 Q 8 -18 11 -14 Q 15 -16 17 -10 Q 18 -2 13 1 L -10 1 Q -12 1 -12 -2" class="weather-icon"/>
<!-- Fog lines -->
<line x1="-16" y1="8" x2="14" y2="8" class="weather-icon"/>
<line x1="-14" y1="14" x2="12" y2="14" class="weather-icon"/>
<line x1="-12" y1="20" x2="10" y2="20" class="weather-icon"/>
</g>
<!-- Thunderstorm (500-600) -->
<g transform="translate(550, 60)">
<!-- Cloud -->
<path d="M -12 6 Q -16 6 -18 1 Q -20 -6 -12 -9 Q -6 -11 2 -9 Q 8 -10 11 -6 Q 15 -8 17 -2 Q 18 4 13 7 L -10 7 Q -12 7 -12 6" class="weather-icon"/>
<!-- Lightning bolt -->
<path d="M 2 10 L -2 16 L 0 16 L -4 24 L 4 18 L 0 18 L 2 10" class="weather-fill"/>
<!-- Rain drops -->
<line x1="-8" y1="12" x2="-6" y2="18" class="weather-icon"/>
<line x1="8" y1="12" x2="10" y2="18" class="weather-icon"/>
</g>
</svg>
```