<!-- DAY -->
<!-- SUNNY -->
<svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="49.98" cy="50.04" r="10.009"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="50.081" y1="32.176" x2="50.081" y2="27.988"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="50.081" y1="67.991" x2="50.081" y2="72.179"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="62.709" y1="37.307" x2="65.671" y2="34.345"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="37.386" y1="37.373" x2="34.424" y2="34.412"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="62.667" y1="62.71" x2="65.629" y2="65.672"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="37.344" y1="62.644" x2="34.383" y2="65.605"/>
<line fill="none" stroke="#000000" stroke-width="4.0484" stroke-linecap="round" stroke-miterlimit="10" x1="31.966" y1="50.009" x2="28.026" y2="50.009"/>
<line fill="none" stroke="#000000" stroke-width="4.0484" stroke-linecap="round" stroke-miterlimit="10" x1="68.028" y1="50.009" x2="71.969" y2="50.009"/>
</svg>
<!-- PARTLY CLOUDY -->
<svg version="1.1" id="partlyCloudy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="sun_partly">
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="53.074" cy="49.94" r="9.283"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="53.168" y1="33.372" x2="53.168" y2="29.487"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="53.168" y1="66.588" x2="53.168" y2="70.473"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.88" y1="38.13" x2="67.627" y2="35.383"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.394" y1="38.192" x2="38.647" y2="35.445"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.842" y1="61.691" x2="67.589" y2="64.438"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.355" y1="61.629" x2="38.609" y2="64.376"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="36.367" y1="49.911" x2="32.713" y2="49.911"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="69.814" y1="49.911" x2="73.469" y2="49.911"/>
</g>
<g id="cloud_partly">
<path fill="#FFFDFD" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M57.263,72.111
c5.628,0,11.329-4.592,11.329-10.219c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.789-3.728-9.805-12.605-9.805c-7.722,0-13.981,6.26-13.981,13.981s6.26,13.981,13.981,13.981s13.892-0.004,13.892-0.004
L57.263,72.111z"/>
</g>
</svg>
<!-- PATCHY RAIN DAY -->
<svg version="1.1" id="patchyRain" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="sun_patchy2">
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="52.69" cy="43.858" r="8.993"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.78" y1="27.807" x2="52.78" y2="24.044"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.78" y1="59.987" x2="52.78" y2="63.75"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.127" y1="32.417" x2="66.788" y2="29.756"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="37.601" y1="57.852" x2="40.262" y2="55.191"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.374" y1="32.477" x2="38.713" y2="29.816"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.09" y1="55.242" x2="66.751" y2="57.903"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="36.504" y1="43.83" x2="32.964" y2="43.83"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="68.907" y1="43.83" x2="72.447" y2="43.83"/>
</g>
<g id="cloud_patchy2">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M57.748,65.771
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain_patchy2">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="59.709" x2="39.402" y2="72.956"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.112" y1="62.709" x2="47.112" y2="75.956"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.113" y1="59.709" x2="55.113" y2="72.956"/>
</g>
</svg>
<!-- PATCHY SLEET DAY -->
<svg version="1.1" id="patchySleetDay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<g id="sun33">
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="52.504" cy="42.831" r="9.283"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.598" y1="26.263" x2="52.598" y2="22.378"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.598" y1="59.479" x2="52.598" y2="63.364"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.31" y1="31.021" x2="67.057" y2="28.274"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="40.824" y1="31.083" x2="38.077" y2="28.336"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.272" y1="54.582" x2="67.019" y2="57.329"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="40.785" y1="54.52" x2="38.039" y2="57.267"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="35.797" y1="42.802" x2="32.143" y2="42.802"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="69.244" y1="42.802" x2="72.899" y2="42.802"/>
</g>
<g id="cloud33">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M57.297,66.106
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain33">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="46.514" y1="63.656" x2="46.514" y2="77.622"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="38.975" y1="59.733" x2="38.975" y2="73.698"/>
</g>
<g id="snow33">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="54.719" y1="60.532" x2="54.719" y2="60.203"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="54.719" y1="67.533" x2="54.719" y2="67.203"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="54.719" y1="74.533" x2="54.719" y2="74.204"/>
</g>
</g>
</svg>
<!-- PATCHY SNOW DAY -->
<svg version="1.1" id="patchySnow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="snow_patchy">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="60.038" x2="39.402" y2="59.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="67.039" x2="39.402" y2="66.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="74.039" x2="39.402" y2="73.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="63.038" x2="47.403" y2="62.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="70.039" x2="47.403" y2="69.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="77.039" x2="47.403" y2="76.71"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="60.197" x2="55.193" y2="59.868"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="67.198" x2="55.193" y2="66.868"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="74.198" x2="55.193" y2="73.869"/>
</g>
<g id="sun_patchy">
<circle fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="52.69" cy="43.858" r="8.993"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.78" y1="27.807" x2="52.78" y2="24.044"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="52.78" y1="59.987" x2="52.78" y2="63.75"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.127" y1="32.417" x2="66.788" y2="29.756"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="37.601" y1="57.852" x2="40.262" y2="55.191"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.374" y1="32.477" x2="38.713" y2="29.816"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="64.09" y1="55.242" x2="66.751" y2="57.903"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="36.504" y1="43.83" x2="32.964" y2="43.83"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="68.907" y1="43.83" x2="72.447" y2="43.83"/>
</g>
<g id="cloud_patchy">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M57.748,65.771
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
</svg>
<!-- PATCH SNOW ALT -->
<svg version="1.1" id="patchySnowAlt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="snow_patchy3">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="52.483" x2="41.5" y2="52.154"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="59.484" x2="41.5" y2="59.154"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="66.484" x2="41.5" y2="66.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="55.484" x2="49.501" y2="55.154"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="62.484" x2="49.501" y2="62.154"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="69.484" x2="49.501" y2="69.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="52.642" x2="57.291" y2="52.313"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="59.643" x2="57.291" y2="59.313"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="66.643" x2="57.291" y2="66.314"/>
</g>
<g id="cloud_patchy3">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.216
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
</svg>
<!-- END DAY -->
<!-- NIGHT -->
<!-- CLEAR -->
<svg version="1.1" id="clear" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M40.213,50.278c0.141,5.109,4.401,9.368,9.51,9.51
C55.257,59.94,59.791,55.5,59.791,50c0,0-1.373-0.111-1.373-0.111c-4.387-0.354-7.883-3.814-8.283-8.198L50,40.209
C44.5,40.209,40.06,44.743,40.213,50.278z"/>
</svg>
<!-- CLOUDY -->
<svg version="1.1" id="cloudy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.42,63.973c5.628,0,11.329-4.592,11.329-10.219
c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155c0-3.789-3.728-9.805-12.605-9.805
c-7.722,0-13.981,6.26-13.981,13.981s6.26,13.981,13.981,13.981s13.892-0.004,13.892-0.004L59.42,63.973z"/>
</svg>
<!-- PARTLY CLOUDY -->
<svg version="1.1" id="partlyCloudy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path id="moon" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M51.367,42.367c0.141,5.109,4.401,9.368,9.51,9.51
c5.534,0.153,10.069-4.288,10.069-9.787c0,0-1.373-0.111-1.373-0.111c-4.387-0.354-7.883-3.814-8.283-8.198l-0.135-1.483
C55.654,32.298,51.214,36.833,51.367,42.367z"/>
<path id="cloud" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M58.379,67.697
c5.628,0,11.329-4.592,11.329-10.219c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.789-3.728-9.805-12.605-9.805c-7.722,0-13.981,6.26-13.981,13.981s6.26,13.981,13.981,13.981s13.892-0.004,13.892-0.004
L58.379,67.697z"/>
</svg>
<!-- PATCHY RAIN -->
<svg version="1.1" id="patchyRain" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="moon2">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M51.619,37.24c0.141,5.109,4.401,9.368,9.51,9.51
c5.534,0.153,10.069-4.288,10.069-9.787c0,0-1.373-0.111-1.373-0.111c-4.387-0.354-7.883-3.814-8.283-8.198l-0.135-1.483
C55.906,27.172,51.466,31.706,51.619,37.24z"/>
</g>
<g id="cloud2">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M58.998,62.643
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="40.652" y1="56.581" x2="40.652" y2="69.828"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="48.363" y1="59.581" x2="48.363" y2="72.828"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="56.363" y1="56.581" x2="56.363" y2="69.828"/>
</g>
</svg>
<!-- PATCHY SLEET NIGHT -->
<svg version="1.1" id="patchySleetNight" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path id="moon_sleet" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M51.364,36.907c0.141,5.109,4.401,9.368,9.51,9.51
c5.534,0.153,10.069-4.288,10.069-9.787l-1.373-0.111c-4.387-0.354-7.883-3.814-8.283-8.198l-0.135-1.483
C55.651,26.838,51.211,31.373,51.364,36.907z"/>
<g id="cloud13">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.253,61.989
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain25">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="48.51" y1="59.196" x2="48.51" y2="73.162"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="40.971" y1="55.273" x2="40.971" y2="69.238"/>
</g>
<g id="snow25">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="56.715" y1="56.072" x2="56.715" y2="55.743"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="56.715" y1="63.073" x2="56.715" y2="62.743"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="56.715" y1="70.073" x2="56.715" y2="69.744"/>
</g>
</svg>
<!-- PATCHY SNOW NIGHT -->
<svg version="1.1" id="patchySnow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="moon3">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M51.619,37.24c0.141,5.109,4.401,9.368,9.51,9.51
c5.534,0.153,10.069-4.288,10.069-9.787c0,0-1.373-0.111-1.373-0.111c-4.387-0.354-7.883-3.814-8.283-8.198l-0.135-1.483
C55.906,27.172,51.466,31.706,51.619,37.24z"/>
</g>
<g id="snow">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="60.038" x2="39.402" y2="59.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="67.039" x2="39.402" y2="66.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="74.039" x2="39.402" y2="73.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="63.038" x2="47.403" y2="62.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="70.039" x2="47.403" y2="69.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="77.039" x2="47.403" y2="76.71"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="60.197" x2="55.193" y2="59.868"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="67.198" x2="55.193" y2="66.868"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="55.193" y1="74.198" x2="55.193" y2="73.869"/>
</g>
<g id="cloud3">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M58.998,62.643
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
</svg>
<!-- END NIGHT -->
<!-- MISC -->
<!-- MIST -->
<svg version="1.1" id="mist" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.42,63.973c5.628,0,11.329-4.592,11.329-10.219
c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155c0-3.789-3.728-9.805-12.605-9.805
c-7.722,0-13.981,6.26-13.981,13.981s6.26,13.981,13.981,13.981s13.892-0.004,13.892-0.004L59.42,63.973z"/>
<line id="mistline" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="31.88" y1="72.524" x2="69.958" y2="72.524"/>
</svg>
<!-- LIGHTNING -->
<svg version="1.1" id="LightningStorm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud4">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M58.998,62.643
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<polygon id="lightning" points="45.221,52.912 55.219,52.904 49.22,62.904 56.219,62.904 43.221,78.902 46.821,66.904
40.221,66.904 "/>
</svg>
<!-- FREEZING DRIZZLE -->
<svg version="1.1" id="freezingDrizzle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_freeze">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.758
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain_freeze">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="52.876" x2="41.5" y2="66.124"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.21" y1="55.876" x2="49.21" y2="68.123"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.211" y1="52.876" x2="57.211" y2="66.124"/>
</g>
<g id="freeze">
<path d="M37.291,63.75c0.324-0.56,1.039-0.751,1.599-0.429l1.286,0.742V62.58c0-0.646,0.525-1.171,1.171-1.171
c0.646,0,1.171,0.525,1.171,1.171v1.484l1.285-0.742c0.56-0.323,1.276-0.132,1.599,0.429c0.324,0.56,0.132,1.276-0.428,1.599
l-1.286,0.742l1.286,0.742c0.56,0.324,0.752,1.039,0.428,1.599c-0.323,0.559-1.038,0.751-1.599,0.427l-1.285-0.741v1.484
c0,0.647-0.525,1.171-1.171,1.171c-0.646,0-1.171-0.524-1.171-1.171v-1.484l-1.285,0.742c-0.56,0.324-1.276,0.132-1.599-0.427
c-0.323-0.56-0.132-1.276,0.429-1.599l1.285-0.743L37.72,65.35C37.16,65.026,36.969,64.311,37.291,63.75z M41.347,67.263
c0.646,0,1.171-0.525,1.171-1.171c0-0.647-0.525-1.171-1.171-1.171c-0.646,0-1.171,0.524-1.171,1.171
C40.176,66.738,40.7,67.263,41.347,67.263z"/>
<path d="M45.14,65.467c0.324-0.56,1.039-0.751,1.599-0.429l1.286,0.742v-1.484c0-0.646,0.525-1.171,1.171-1.171
c0.646,0,1.171,0.525,1.171,1.171v1.484l1.285-0.742c0.56-0.323,1.276-0.132,1.599,0.429c0.324,0.56,0.132,1.276-0.428,1.599
l-1.286,0.742l1.286,0.742c0.56,0.324,0.752,1.039,0.428,1.599c-0.323,0.559-1.038,0.751-1.599,0.427l-1.285-0.741v1.484
c0,0.647-0.525,1.171-1.171,1.171c-0.646,0-1.171-0.524-1.171-1.171v-1.484l-1.285,0.742c-0.56,0.324-1.276,0.132-1.599-0.427
c-0.323-0.56-0.132-1.276,0.429-1.599l1.285-0.743l-1.285-0.742C45.009,66.742,44.818,66.027,45.14,65.467z M49.196,68.979
c0.646,0,1.171-0.525,1.171-1.171c0-0.647-0.525-1.171-1.171-1.171c-0.646,0-1.171,0.524-1.171,1.171
C48.025,68.454,48.55,68.979,49.196,68.979z"/>
<path d="M53.135,63.618c0.324-0.56,1.039-0.751,1.599-0.429l1.286,0.742v-1.484c0-0.646,0.525-1.171,1.171-1.171
c0.646,0,1.171,0.525,1.171,1.171v1.484l1.285-0.742c0.56-0.323,1.276-0.132,1.599,0.429c0.324,0.56,0.132,1.276-0.428,1.599
l-1.286,0.742l1.286,0.742c0.56,0.324,0.752,1.039,0.428,1.599c-0.323,0.559-1.038,0.751-1.599,0.427l-1.285-0.741v1.484
c0,0.647-0.525,1.171-1.171,1.171c-0.646,0-1.171-0.524-1.171-1.171v-1.484l-1.285,0.742c-0.56,0.324-1.276,0.132-1.599-0.427
c-0.323-0.56-0.132-1.276,0.429-1.599l1.285-0.743l-1.285-0.742C53.004,64.894,52.813,64.179,53.135,63.618z M57.191,67.131
c0.646,0,1.171-0.525,1.171-1.171c0-0.647-0.525-1.171-1.171-1.171c-0.646,0-1.171,0.524-1.171,1.171
C56.02,66.606,56.545,67.131,57.191,67.131z"/>
</g>
</svg>
<!-- FREEZING FOG -->
<svg version="1.1" id="freezingFog" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enableBackground="new 0 0 100 100" xmlSpace="preserve">
<path id="cloudFog" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,59.41
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
<path id="freezeFog" d="M41.942,53.407c0.553-0.957,1.775-1.283,2.732-0.732l2.196,1.267v-2.535c0-1.104,0.896-2,2-2s2,0.896,2,2
v2.535l2.195-1.268c0.957-0.551,2.18-0.225,2.731,0.732c0.553,0.957,0.225,2.18-0.731,2.732l-2.196,1.268l2.196,1.268
c0.956,0.553,1.284,1.775,0.731,2.732c-0.552,0.955-1.774,1.283-2.731,0.73L50.87,60.87v2.535c0,1.105-0.896,2-2,2s-2-0.895-2-2
V60.87l-2.195,1.268c-0.957,0.553-2.18,0.225-2.732-0.73c-0.552-0.957-0.225-2.18,0.732-2.732l2.195-1.269l-2.195-1.268
C41.718,55.586,41.391,54.364,41.942,53.407z M48.87,59.407c1.104,0,2-0.896,2-2c0-1.105-0.896-2-2-2s-2,0.895-2,2
C46.87,58.51,47.766,59.407,48.87,59.407z"/>
<line id="lineFog" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="30.961" y1="68.291" x2="69.039" y2="68.291"/>
</svg>
<!-- PATCHY DRIZZLE -->
<svg version="1.1" id="patchyDrizzle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_drizzle">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.758
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain_drizzle">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="52.876" x2="41.5" y2="66.124"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.21" y1="55.876" x2="49.21" y2="69.124"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.211" y1="52.876" x2="57.211" y2="66.124"/>
</g>
</svg>
<!-- PATCHY SLEET -->
<svg version="1.1" id="patchySleet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_sleet">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.216
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="snow_sleet">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="52.642" x2="57.291" y2="52.313"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="59.643" x2="57.291" y2="59.313"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="66.643" x2="57.291" y2="66.314"/>
</g>
<g id="snow_sleet_lines">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.086" y1="55.766" x2="49.086" y2="69.732"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.547" y1="51.843" x2="41.547" y2="65.808"/>
</g>
</svg>
<!-- BLOWING SNOW -->
<svg version="1.1" id="blowingSnow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_blow">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.216
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="snow_blow">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="60.038" x2="39.402" y2="59.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="67.039" x2="39.402" y2="66.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="39.402" y1="74.039" x2="39.402" y2="73.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="63.038" x2="47.403" y2="62.709"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="47.403" y1="70.039" x2="47.403" y2="69.709"/>
</g>
<g id="wind">
<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M76.257,67.432H63.285
c-3.163,0-3.373-4.788-0.214-4.945c0.181-0.009,0.372-0.012,0.571-0.008"/>
<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M76.257,67.477H63.285
c-3.163,0-3.373,4.788-0.214,4.945c0.181,0.009,0.372,0.012,0.571,0.008"/>
</g>
</svg>
<!-- PATCHY SNOW THUNDER -->
<svg version="1.1" id="patchySnowThunder" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_patchy_thunder">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.217
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<polygon id="lightning2" points="46.092,48.511 56.09,48.503 50.091,58.503 57.09,58.503 44.092,74.501 47.692,62.503 41.092,62.503"/>
<g id="snow_patchy_thunder">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="52.484" x2="41.5" y2="52.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="59.485" x2="41.5" y2="59.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="66.485" x2="41.5" y2="66.156"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="55.485" x2="49.501" y2="55.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="62.485" x2="49.501" y2="62.155"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.501" y1="69.485" x2="49.501" y2="69.156"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="52.643" x2="57.291" y2="52.314"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="59.644" x2="57.291" y2="59.314"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.291" y1="66.644" x2="57.291" y2="66.315"/>
</g>
</svg>
<!-- PATCHY RAIN THUNDER -->
<svg version="1.1" id="patchyRainThunder" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="cloud_rain_thunder">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.668
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
<g id="rain_thunder">
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="41.5" y1="52.786" x2="41.5" y2="66.034"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="49.21" y1="55.786" x2="49.21" y2="69.034"/>
<line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="57.211" y1="52.786" x2="57.211" y2="66.034"/>
</g>
<polygon id="lightning3" points="47.001,48.99 56.999,48.982 51,58.982 57.999,58.982 45.001,74.98 48.601,62.982 42.001,62.982 "/>
</svg>
<!-- ICE PELLETS -->
<svg version="1.1" id="IcePellets" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="pellets">
<circle cx="41.582" cy="52.434" r="1.737"/>
<circle cx="49.458" cy="55.317" r="1.737"/>
<circle cx="57.333" cy="52.434" r="1.737"/>
<circle cx="41.582" cy="52.434" r="1.737"/>
<circle cx="49.458" cy="55.317" r="1.737"/>
<circle cx="57.333" cy="52.434" r="1.737"/>
<circle cx="41.582" cy="52.434" r="1.737"/>
<circle cx="49.458" cy="55.317" r="1.737"/>
<circle cx="57.333" cy="52.434" r="1.737"/>
</g>
<g id="cloud_pellets">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M59.869,58.217
c5.628,0,10.458-4.335,10.458-9.963c0-3.413-1.71-6.238-4.286-8.088c-4.996-3.411-9.782,0.155-9.782,0.155
c0-3.782-3.713-9.781-12.552-9.805c-7.738-0.021-14.049,6.44-14.034,14.178c0.002,0.843,0.014,1.554,0.049,2.191
c0.214,3.91,2.116,7.6,5.302,9.878c1.192,0.853,2.507,1.43,3.812,1.431"/>
</g>
</svg> html,body {
height:100%;
}
body {
display:flex;
flex-direction:row;
align-items:center;
flex-wrap:wrap;
justify-content: center;
}
svg {
width:200px;
visibility:hidden;
}TweenMax.set('svg',{visibility:'visible'})
// DAY
// SUNNY
const tl = new TimelineMax({repeat:-1,repeatDelay:1});
tl.fromTo('#sun',1,{y:30,opacity:0},{y:0,opacity:1,rotation:'+=90',ease:Power4.easeIn},"in")
tl.to('#sun',1.25,{rotation:'+=180',ease:Back.easeOut.config(1.7)},'in+=1')
tl.timeScale(1.25)
// PARTLY CLOUDY DAY
const tl2 = new TimelineMax({repeat:-1,repeatDelay:1});
tl2.fromTo('#sun_partly',1,{opacity:0,y:30},{transformOrigin:"center center",rotation:90,opacity:1,y:0,ease:Back.easeOut.config(1.7)},'in')
.fromTo('#cloud_partly',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
// PATCHY RAIN DAY
const tl3 = new TimelineMax({repeat:-1,repeatDelay:1})
TweenMax.set('#rain_patchy2 line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
tl3.fromTo('#sun_patchy2',1,{opacity:0,y:30},{transformOrigin:"center center",rotation:90,opacity:1,y:0,ease:Back.easeOut.config(1.7)},'in')
.fromTo('#cloud_patchy2',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#rain_patchy2 line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// PATCHY SLEET DAY
TweenMax.set("#rain33 line ",{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set("#snow33 line ",{opacity:0})
const tl19 = new TimelineMax({repeat:-1});
tl19.fromTo('#sun33',1,{opacity:0,y:30},{transformOrigin:"center center",rotation:90,opacity:1,y:0,ease:Back.easeOut.config(1.7)},'in')
.fromTo('#cloud33',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#rain33 line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",ease:Expo.easeIn,repeat:-1},0.1,'in+=0.5')
.staggerTo('#snow33 line',2.25,{opacity:1,bezier:[{x:0.5,y:5},{x:-1,y:7},{x:1.5,y:10},{x:0,y:12}],repeat:-1,ease:Sine.easeIn},0.5,'in')
// PATCHY SNOW DAY
const tl4 = new TimelineMax({repeat:-1,repeatDelay:1})
TweenMax.set('#snow_patchy line',{opacity:0,y:-5})
tl4.fromTo('#sun_patchy',1,{opacity:0,y:30},{transformOrigin:"center center",rotation:90,opacity:1,y:0,ease:Back.easeOut.config(1.7)},'in')
.fromTo('#cloud_patchy',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#snow_patchy line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
// PATCHY SNOW ALT DAY
const tl6 = new TimelineMax({repeat:-1,repeatDelay:1})
TweenMax.set('#snow_patchy3 line',{opacity:0,y:-5})
tl6.fromTo('#cloud_patchy3',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#snow_patchy3 line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
//////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
// NIGHT
// MOON/CLEAR
const tl7 = new TimelineMax({repeat:-1,repeatDelay:1})
tl7.fromTo("#clear",1,{rotation:90,y:30,opacity:0},{y:0,rotation:0,opacity:1,ease:Back.easeOut.config(1.7)})
// CLOUDY
const tl8 = new TimelineMax({repeat:-1,repeatDelay:1})
tl8.fromTo('#cloudy',1,{y:30,opacity:0},{opacity:1,y:0,ease:Back.easeOut.config(1,7)})
// PARTLY CLOUDY NIGHT
TweenMax.set('#moon',{y:30,opacity:0,rotation:90})
TweenMax.set("#cloud",{y:30,opacity:1})
const tl10 = new TimelineMax({repeat:-1,repeatDelay:1})
tl10.to('#moon',1,{y:0,opacity:1,rotation:0,ease:Back.easeOut.config(1,7)},'in')
.to('#cloud',1,{y:0,opacity:1,ease:Back.easeOut.config(1,7)},'in')
// PATCHY RAIN NIGHT
TweenMax.set('#moon2',{y:30,opacity:0,rotation:90})
TweenMax.set('#rain line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set('#cloud2',{y:30})
const tl11 = new TimelineMax({repeat:-1,repeatDelay:1})
tl11.to('#moon2',1,{y:0,rotation:0,opacity:1,ease:Back.easeOut.config(1,7)},'in')
.to('#cloud2',1,{y:0,ease:Back.easeOut.config(1,7)},'in')
.staggerTo('#rain line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// PATCHY SLEET NIGHT
TweenMax.set('#moon_sleet',{y:30,opacity:0,rotation:90})
TweenMax.set("#cloud13",{y:30,opacity:1})
TweenMax.set('#rain25 line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set('#snow25 line',{opacity:0})
const tl20 = new TimelineMax({repeat:-1,repeatDelay:1})
tl20.to('#moon_sleet',1,{y:0,opacity:1,rotation:0,ease:Back.easeOut.config(1,7)},'in')
.to('#cloud13',1,{y:0,opacity:1,ease:Back.easeOut.config(1,7)},'in')
.staggerTo('#rain25 line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",ease:Expo.easeIn,repeat:-1},0.1,'in+=0.5')
.staggerTo('#snow25 line',2.25,{opacity:1,bezier:[{x:0.5,y:5},{x:-1,y:7},{x:1.5,y:10},{x:0,y:12}],repeat:-1,ease:Sine.easeIn},0.5,'in')
// PATCHY SNOW NIGHT
TweenMax.set('#moon3',{y:30,opacity:0,rotation:90})
TweenMax.set('#snow line',{opacity:0,y:-5})
TweenMax.set('#cloud3',{y:30})
const tl12 = new TimelineMax({repeat:-1,repeatDelay:1})
tl12.to('#moon3',1,{y:0,rotation:0,opacity:1,ease:Back.easeOut.config(1,7)},'in')
.to('#cloud3',1,{y:0,ease:Back.easeOut.config(1,7)},'in')
.staggerTo('#snow line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// MISC
// MIST
TweenMax.set('#mist',{y:30})
TweenMax.set('#mistline',{rotation:180,transformOrigin:"center center"})
TweenMax.set('#mistline',{"stroke-dashoffset":"40px","stroke-dasharray":"40px"})
const tl9 = new TimelineMax({repeat:-1,repeatDelay:1})
tl9.fromTo('#mist',1,{y:30,opacity:0},{opacity:1,y:0,ease:Back.easeOut.config(1,7)},'in')
.to('#mistline',0.5,{"stroke-dasharray":"40px","stroke-dashoffset":"0px"},'in+=0.5')
// LIGHTNING
TweenMax.set('#lightning',{opacity:0,transformOrigin:"center top"})
TweenMax.set('#cloud4',{y:30,opacity:0})
const mtl = new TimelineMax()
const tl13 = new TimelineMax({paused:true})
const tl14 = new TimelineMax({repeat:-1,paused:true});
tl13.to('#cloud4',1,{y:0,opacity:1,ease:Back.easeOut.config(1.7)})
tl14.fromTo('#lightning',0.6,{opacity:0},{opacity:1})
.fromTo('#lightning',0.6,{opacity:1,immediateRender:false},{opacity:0})
mtl.add(tl13.play(),0)
.add(tl14.play(),0.85)
// FREEZING DRIZZLE
TweenMax.set('#cloud_freeze',{y:30})
TweenMax.set('#rain_freeze line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set('#freeze path',{scale:0,opacity:0,transformOrigin:"center center"})
const tl15 = new TimelineMax({repeat:-1,repeatDelay:-1})
tl15.to('#cloud_freeze',1,{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#rain_freeze line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
.staggerTo('#freeze path',1,{scale:1,opacity:1,repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// FREEZING FOG
TweenMax.set('#cloudFog',{y:30})
TweenMax.set('#freezeFog',{y:30})
TweenMax.set("#lineFog",{rotation:180,transformOrigin:"center center"})
TweenMax.set("#lineFog",{"stroke-dashoffset":"40px","stroke-dasharray":"40px"})
const tl16 = new TimelineMax({repeat:-1,repeatDelay:1})
tl16.fromTo('#cloudFog',1,{y:30,opacity:0},{opacity:1,y:0,ease:Back.easeOut.config(1,7)},'in')
.fromTo('#freezeFog',1,{y:30,opacity:0},{opacity:1,y:0,ease:Back.easeOut.config(1,7)},'in')
.to('#lineFog',0.5,{"stroke-dasharray":"40px","stroke-dashoffset":"0px"},'in+=0.5')
// PATCHY DRIZZLE
TweenMax.set('#rain_drizzle line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set('#cloud_drizzle',{y:30})
const tl17 = new TimelineMax({repeat:-1,repeatDelay:1})
tl17
.to('#cloud_drizzle',1,{y:0,ease:Back.easeOut.config(1,7)},'in')
.staggerTo('#rain_drizzle line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// PATCHY SLEET
TweenMax.set('#cloud_sleet',{y:30})
TweenMax.set('#snow_sleet line',{opacity:0})
TweenMax.set('#snow_sleet_lines line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
const tl18 = new TimelineMax({repeat:-1,repeatDelay:1});
tl18
.to('#cloud_sleet',1,{y:0,ease:Back.easeOut.config(1,7)},'in')
.staggerTo('#snow_sleet line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
.staggerTo('#snow_sleet_lines line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// BLOWING SNOW
const tl5 = new TimelineMax({repeat:-1,repeatDelay:1})
TweenMax.set('#wind path',{"stroke-dashoffset":'30px',"stroke-dasharray":"30px"})
TweenMax.set('#cloud_blow',{y:30})
TweenMax.set('#snow_blow line',{opacity:0});
tl5.fromTo('#cloud_blow',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#snow_blow line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
.to('#wind path',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"30px",repeat:-1,ease:Expo.easeIn},0.1,'in+=0.5')
// SNOW THUNDER
TweenMax.set("#cloud_patchy_thunder",{y:30})
TweenMax.set("#snow_patchy_thunder line",{opacity:0})
TweenMax.set("#lightning2",{opacity:0})
const tl21 = new TimelineMax({paused:true})
tl21.fromTo('#cloud_patchy_thunder',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.staggerTo('#snow_patchy_thunder line',2.25,{opacity:1,bezier:[{x:0.5,y:7},{x:-1,y:10},{x:1.5,y:13},{x:0,y:15}],repeat:-1,ease:Sine.easeIn},0.5,'in')
const tl22 = new TimelineMax({repeat:-1,paused:true})
.fromTo('#lightning2',0.6,{opacity:0},{opacity:1})
.fromTo('#lightning2',0.6,{opacity:1,immediateRender:false},{opacity:0})
const smTl = new TimelineMax();
smTl.add(tl21.play())
.add(tl22.play(),1)
// RAIN THUNDER
TweenMax.set('#cloud_rain_thunder',{y:30})
TweenMax.set('#rain_thunder line',{"stroke-dashoffset":'40px',"stroke-dasharray":"40px"})
TweenMax.set('#lightning3',{opacity:0})
const mTl = new TimelineMax();
const tl23 = new TimelineMax({paused:true});
tl23.fromTo('#cloud_rain_thunder',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
const subThunderTl = new TimelineMax({repeat:-1,paused:true,repeatDelay:0.1});
subThunderTl
.fromTo('#lightning3',0.6,{opacity:0},{opacity:1},'in')
.fromTo('#lightning3',0.6,{opacity:1,immediateRender:false},{opacity:0})
.staggerTo('#rain_thunder line',1,{"stroke-dashoffset":'0px',"stroke-dasharray":"40px",ease:Expo.easeIn},0.1,'in+=0.6')
.to('#rain_thunder line',1,{opacity:0,ease:Expo.easeIn},'in+=1.8')
mTl.add(tl23.play(),0)
.add(subThunderTl.play(),1)
// PELLETS
TweenMax.set('#pellets circle',{opacity:0})
const tl24 = new TimelineMax({})
tl24.fromTo('#cloud_pellets',1,{y:30},{y:0,ease:Back.easeOut.config(1.7)},'in')
.set('#pellets circle',{opacity:1},'in+=1')
.staggerTo('#pellets circle',0.45,{ease:Expo.easeIn,y:15,repeat:-1},0.3,'in+=1')
External CSS
This Pen doesn't use any external CSS resources.