New apps Added

This commit is contained in:
francop committed 2026-07-08 10:43:39 -04:00
1 parent 3b1f4bbd75
commit fefc2c8b5c
1114 files changed
+406637 -154

No files matched your search

@@ -0,0 +1,131 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.34167" y="-.34167" width="1.6833" height="1.85">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,159 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.3038" y="-.3318" width="1.6076" height="1.894">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
]]>
</style>
</defs>
<g id="night" transform="translate(-4,-18)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .78534 36 20.022)" stroke-width="1.2616">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5" fill="#ffa500" stroke-miterlimit="10"
stroke-width="1.4105" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5"
fill="#ffa500" stroke-miterlimit="10" stroke-width="1.4105" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2.5232" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

@@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.8 KiB

@@ -0,0 +1,206 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16 -2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.8 KiB

@@ -0,0 +1,206 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="56" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -0,0 +1,178 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.8 KiB

@@ -0,0 +1,206 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud {
-webkit-animation-name: am-weather-cloud;
-moz-animation-name: am-weather-cloud;
animation-name: am-weather-cloud;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -0,0 +1,113 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="cloudy" transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-1"
style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
<path transform="matrix(.6 0 0 .6 -10 -8)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16 -2)" filter="url(#blur)">
<g class="am-weather-wind" transform="translate(-16,10)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<path stroke-dasharray="150 10" d="M25.5 5A4 4 0 1 1 29 11H10">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0s" />
</path>
<path stroke-dasharray="144 16" d="M39.5 11A4 4 0 1 1 43 17H6">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.5s" />
</path>
<path stroke-dasharray="150 10" d="M28.5 29A4 4 0 1 0 32 23H15">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.25s" />
</path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,244 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** FOG
*/
@keyframes am-weather-fog-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-1 {
-webkit-animation-name: am-weather-fog-1;
-moz-animation-name: am-weather-fog-1;
-ms-animation-name: am-weather-fog-1;
animation-name: am-weather-fog-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-2 {
-webkit-animation-name: am-weather-fog-2;
-moz-animation-name: am-weather-fog-2;
-ms-animation-name: am-weather-fog-2;
animation-name: am-weather-fog-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-3 {
-webkit-animation-name: am-weather-fog-3;
-moz-animation-name: am-weather-fog-3;
-ms-animation-name: am-weather-fog-3;
animation-name: am-weather-fog-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-4 {
-webkit-animation-name: am-weather-fog-4;
-moz-animation-name: am-weather-fog-4;
-ms-animation-name: am-weather-fog-4;
animation-name: am-weather-fog-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />F
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
</g>
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.0 KiB

@@ -0,0 +1,309 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** FOG
*/
@keyframes am-weather-fog-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-1 {
-webkit-animation-name: am-weather-fog-1;
-moz-animation-name: am-weather-fog-1;
-ms-animation-name: am-weather-fog-1;
animation-name: am-weather-fog-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-2 {
-webkit-animation-name: am-weather-fog-2;
-moz-animation-name: am-weather-fog-2;
-ms-animation-name: am-weather-fog-2;
animation-name: am-weather-fog-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-3 {
-webkit-animation-name: am-weather-fog-3;
-moz-animation-name: am-weather-fog-3;
-ms-animation-name: am-weather-fog-3;
animation-name: am-weather-fog-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-4 {
-webkit-animation-name: am-weather-fog-4;
-moz-animation-name: am-weather-fog-4;
-ms-animation-name: am-weather-fog-4;
animation-name: am-weather-fog-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,172 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** FOG
*/
@keyframes am-weather-fog-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-1 {
-webkit-animation-name: am-weather-fog-1;
-moz-animation-name: am-weather-fog-1;
-ms-animation-name: am-weather-fog-1;
animation-name: am-weather-fog-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-2 {
-webkit-animation-name: am-weather-fog-2;
-moz-animation-name: am-weather-fog-2;
-ms-animation-name: am-weather-fog-2;
animation-name: am-weather-fog-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-3 {
-webkit-animation-name: am-weather-fog-3;
-moz-animation-name: am-weather-fog-3;
-ms-animation-name: am-weather-fog-3;
animation-name: am-weather-fog-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-fog-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-fog-4 {
-webkit-animation-name: am-weather-fog-4;
-moz-animation-name: am-weather-fog-4;
-ms-animation-name: am-weather-fog-4;
animation-name: am-weather-fog-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

@@ -0,0 +1,204 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** FROST
*/
@keyframes am-weather-frost {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
1% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
3% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
5% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
7% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
9% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
11% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
13% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
15% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-frost {
-webkit-animation-name: am-weather-frost;
-moz-animation-name: am-weather-frost;
animation-name: am-weather-frost;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />F
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
</g>
<g transform="translate(-16,4)">
<g class="am-weather-frost" stroke="#57a0ee" transform="translate(0,2)" fill="none" stroke-width="2"
stroke-linecap="round"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-frost;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-frost;-webkit-animation-timing-function:linear">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
</g>
<g>
<path stroke="#57a0ee" transform="translate(0,0)" fill="none" stroke-width="2" stroke-linecap="round"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

@@ -0,0 +1,269 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** FROST
*/
@keyframes am-weather-frost {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
1% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
3% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
5% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
7% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
9% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
11% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
13% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
15% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-frost {
-webkit-animation-name: am-weather-frost;
-moz-animation-name: am-weather-frost;
animation-name: am-weather-frost;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g transform="translate(-16,4)">
<g class="am-weather-frost" stroke="#57a0ee" transform="translate(0,2)" fill="none" stroke-width="2"
stroke-linecap="round"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-frost;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-frost;-webkit-animation-timing-function:linear">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
</g>
<g>
<path stroke="#57a0ee" transform="translate(0,0)" fill="none" stroke-width="2" stroke-linecap="round"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,130 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** FROST
*/
@keyframes am-weather-frost {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
1% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
3% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
5% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
7% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
9% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
11% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
13% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
15% {
-webkit-transform: translate(-0.3px, 0.0px);
-moz-transform: translate(-0.3px, 0.0px);
-ms-transform: translate(-0.3px, 0.0px);
transform: translate(-0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-frost {
-webkit-animation-name: am-weather-frost;
-moz-animation-name: am-weather-frost;
animation-name: am-weather-frost;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(0,2)" filter="url(#blur)">
<g class="am-weather-frost" stroke="#57a0ee" transform="translate(0,2)" fill="none" stroke-width="2"
stroke-linecap="round"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-frost;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-frost;-webkit-animation-timing-function:linear">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
</g>
<g>
<path stroke="#57a0ee" transform="translate(0,0)" fill="none" stroke-width="2" stroke-linecap="round"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

@@ -0,0 +1,134 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
/*
** CLOUDS
*/
@keyframes am-weather-cloud {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud {
-webkit-animation-name: am-weather-cloud;
-moz-animation-name: am-weather-cloud;
animation-name: am-weather-cloud;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="rotate(10,-247.39,200.17) translate(-20,-6.5)" fill="none" stroke="#91c0f8"
stroke-dasharray="0.1, 7" stroke-linecap="round" stroke-width="3">
<line class="am-weather-rain-1" transform="translate(-5,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(5)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.5 KiB

@@ -0,0 +1,244 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** haze
*/
@keyframes am-weather-haze-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-1 {
-webkit-animation-name: am-weather-haze-1;
-moz-animation-name: am-weather-haze-1;
-ms-animation-name: am-weather-haze-1;
animation-name: am-weather-haze-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-2 {
-webkit-animation-name: am-weather-haze-2;
-moz-animation-name: am-weather-haze-2;
-ms-animation-name: am-weather-haze-2;
animation-name: am-weather-haze-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-3 {
-webkit-animation-name: am-weather-haze-3;
-moz-animation-name: am-weather-haze-3;
-ms-animation-name: am-weather-haze-3;
animation-name: am-weather-haze-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-4 {
-webkit-animation-name: am-weather-haze-4;
-moz-animation-name: am-weather-haze-4;
-ms-animation-name: am-weather-haze-4;
animation-name: am-weather-haze-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
</g>
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.0 KiB

@@ -0,0 +1,309 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** haze
*/
@keyframes am-weather-haze-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-1 {
-webkit-animation-name: am-weather-haze-1;
-moz-animation-name: am-weather-haze-1;
-ms-animation-name: am-weather-haze-1;
animation-name: am-weather-haze-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-2 {
-webkit-animation-name: am-weather-haze-2;
-moz-animation-name: am-weather-haze-2;
-ms-animation-name: am-weather-haze-2;
animation-name: am-weather-haze-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-3 {
-webkit-animation-name: am-weather-haze-3;
-moz-animation-name: am-weather-haze-3;
-ms-animation-name: am-weather-haze-3;
animation-name: am-weather-haze-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-4 {
-webkit-animation-name: am-weather-haze-4;
-moz-animation-name: am-weather-haze-4;
-ms-animation-name: am-weather-haze-4;
animation-name: am-weather-haze-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,172 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** haze
*/
@keyframes am-weather-haze-1 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(7px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-1 {
-webkit-animation-name: am-weather-haze-1;
-moz-animation-name: am-weather-haze-1;
-ms-animation-name: am-weather-haze-1;
animation-name: am-weather-haze-1;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-2 {
0% {
transform: translate(0px, 0px)
}
21.05% {
transform: translate(-6px, 0px)
}
78.95% {
transform: translate(9px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-2 {
-webkit-animation-name: am-weather-haze-2;
-moz-animation-name: am-weather-haze-2;
-ms-animation-name: am-weather-haze-2;
animation-name: am-weather-haze-2;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-3 {
0% {
transform: translate(0px, 0px)
}
25% {
transform: translate(4px, 0px)
}
75% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-3 {
-webkit-animation-name: am-weather-haze-3;
-moz-animation-name: am-weather-haze-3;
-ms-animation-name: am-weather-haze-3;
animation-name: am-weather-haze-3;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-haze-4 {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(-4px, 0px)
}
100% {
transform: translate(0px, 0px)
}
}
.am-weather-haze-4 {
-webkit-animation-name: am-weather-haze-4;
-moz-animation-name: am-weather-haze-4;
-ms-animation-name: am-weather-haze-4;
animation-name: am-weather-haze-4;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Tropical Storm | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.16995" y="-.17864" width="1.3289" height="1.455">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style>
<![CDATA[
@keyframes storm {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
#storm {
-webkit-animation-name: storm;
-moz-animation-name: storm;
animation-name: storm;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
transform-origin: 50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes error {
0% {
fill: #cc0000;
}
50% {
fill: #ff0000;
}
100% {
fill: #cc0000;
}
}
#Shape {
-webkit-animation-name: error;
-moz-animation-name: error;
animation-name: error;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="storm" transform="translate(16,-2)" fill="none" fill-rule="evenodd"
style="-moz-animation-duration:5s;-moz-animation-iteration-count:infinite;-moz-animation-name:storm;-moz-animation-timing-function:linear;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:storm;-webkit-animation-timing-function:linear">
<g transform="translate(15,20)" fill="#c00" fill-rule="nonzero">
<path id=""
d="m18.478 0.091701c0.04503-0.0026866 0.44719-0.0026866 0.89312-0.0013433 0.81178 0.0039403 1.0316 0.013164 1.6236 0.066 0.71569 0.064746 1.4989 0.18233 2.2033 0.33152 0.32351 0.068687 0.76189 0.17167 0.77187 0.18224 0.0025 0.001343-0.10742 0.00797-0.24234 0.013254-1.6374 0.059463-3.2012 0.47409-4.3191 1.1438-0.89052 0.53221-1.5562 1.2428-1.9509 2.0802-0.18364 0.38696-0.25231 0.67487-0.2373 0.98919 0.01995 0.44901 0.19362 0.83731 0.72063 1.6127 0.30733 0.4517 0.52458 0.7911 0.67703 1.0565 0.60575 1.0553 0.91551 2.1053 1.0117 3.434 0.02247 0.31433 0.0187 1.1662-0.0076 1.5056-0.08611 1.1412-0.24854 2.0023-0.53825 2.866-0.77564 2.3139-2.3782 4.3241-4.6589 5.8443-1.2939 0.86382-2.8403 1.569-4.4715 2.0393-1.3089 0.37773-2.5905 0.59436-4.1155 0.69734-0.34849 0.02373-1.861 0.02373-2.2107 0-0.89187-0.05946-1.5563-0.13997-2.3357-0.28128-0.53079-0.09511-1.3039-0.27081-1.2914-0.29194 0.0036854-0.0053 0.098607-0.01057 0.21231-0.01057 0.55578 0 1.4564-0.11355 2.1021-0.26543 1.4526-0.34075 2.5604-0.91263 3.3573-1.7328 0.35721-0.36851 0.62328-0.74355 0.83434-1.1781 0.17366-0.35919 0.24234-0.59955 0.25231-0.88621 0.019955-0.5349-0.12863-0.88755-0.77942-1.8477-0.22733-0.33672-0.47209-0.71713-0.58202-0.906-0.61573-1.0553-0.93924-2.1237-1.0392-3.426-0.017438-0.23113-0.027416-0.84797-0.017438-1.1266 0.059955-1.7117 0.38589-3.1249 1.0354-4.4867 0.90427-1.8952 2.4443-3.5713 4.449-4.8418 2.0896-1.3247 4.6626-2.1938 7.3542-2.4817 0.42346-0.044866 0.68198-0.064746 1.299-0.097701z" />
</g>
</g>
<g class="warning" transform="translate(36,28)">
<path
d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
fill="#c00" />
<path d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
<circle cx="9.5" cy="13" r="1" fill="#fff" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,374 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-1">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,401 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-1">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-5,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

@@ -0,0 +1,265 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-1">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.9 KiB

@@ -0,0 +1,141 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Mix of Rain and Sleet | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-3;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-3;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-sleet-2" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8"
stroke-linecap="round">
<line class="am-weather-rain-1" transform="translate(-5,1)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(5)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
<g class="am-weather-rain-3" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-13,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(-3,2)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(7,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.6 KiB

@@ -0,0 +1,195 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Mix of Rain and Snow | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.2345" width="1.4937" height="1.5712">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translate(0.0px, 0);
-moz-transform: translate(0.0px, 0);
-ms-transform: translate(0.0px, 0);
transform: translate(0.0px, 0);
}
33.33% {
-webkit-transform: translate(-1.2px, 2px);
-moz-transform: translate(-1.2px, 2px);
-ms-transform: translate(-1.2px, 2px);
transform: translate(-1.2px, 2px);
}
66.66% {
-webkit-transform: translate(1.4px, 4px);
-moz-transform: translate(1.4px, 4px);
-ms-transform: translate(1.4px, 4px);
transform: translate(1.4px, 4px);
opacity: 1;
}
100% {
-webkit-transform: translate(-1.6px, 6px);
-moz-transform: translate(-1.6px, 6px);
-ms-transform: translate(-1.6px, 6px);
transform: translate(-1.6px, 6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-3;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-3;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g transform="rotate(10,-198.74,98.01)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 7" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-10,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(5,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.3 KiB

@@ -0,0 +1,179 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rain-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.4 KiB

@@ -0,0 +1,243 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weaher-rain-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

@@ -0,0 +1,106 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.24132" width="1.4937" height="1.5878">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

@@ -0,0 +1,204 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 7" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.8 KiB

@@ -0,0 +1,256 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g class="layer" transform="translate(16,-2)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rain-2" transform="translate(-20,-10) rotate(10,34,46)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" x1="34" x2="34" y1="46" y2="54"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" x1="34" x2="34" y1="46" y2="54"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,131 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="56" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.23409" width="1.4937" height="1.5702">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 7" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

@@ -0,0 +1,206 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4"
stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.3 KiB

@@ -0,0 +1,270 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4"
stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

@@ -0,0 +1,133 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4"
stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

@@ -0,0 +1,374 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,283 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,265 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.9 KiB

@@ -0,0 +1,307 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Severe Thunderstorm | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.17571" y="-.19575" width="1.3379" height="1.4959">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-3 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-3 {
-webkit-animation-name: am-weather-cloud-3;
-moz-animation-name: am-weather-cloud-3;
animation-name: am-weather-cloud-3;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes error {
0% {
fill: #cc0000;
}
50% {
fill: #ff0000;
}
100% {
fill: #cc0000;
}
}
#Shape {
-webkit-animation-name: error;
-moz-animation-name: error;
animation-name: error;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-1"
style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
<path transform="matrix(.6 0 0 .6 -10 -6)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#666" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#333" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke"
points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9" fill="#ffa500" stroke="#fff"
style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
</g>
<g class="warning" transform="translate(20,30)">
<path
d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
fill="#c00" />
<path d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
<circle cx="9.5" cy="13" r="1" fill="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,227 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Mix of Sleet and Snow | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** RAIN
*/
@keyframes am-weather-rain {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.am-weather-rain-1 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-rain-2 {
-webkit-animation-name: am-weather-rain;
-moz-animation-name: am-weather-rain;
-ms-animation-name: am-weather-rain;
animation-name: am-weather-rain;
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-ms-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-ms-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="0.1, 7"
stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-5,1)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
<line class="am-weather-rain-1" transform="translate(5)" y2="8"
style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
</g>
<g class="am-weather-snow-1">
<g transform="translate(1,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2">
<g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.9 KiB

@@ -0,0 +1,241 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun" transform="translate(0,16)"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(12,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.6 KiB

@@ -0,0 +1,269 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(12,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,132 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translate(0.0px, 0);
-moz-transform: translate(0.0px, 0);
-ms-transform: translate(0.0px, 0);
transform: translate(0.0px, 0);
}
33.33% {
-webkit-transform: translate(-1.2px, 2px);
-moz-transform: translate(-1.2px, 2px);
-ms-transform: translate(-1.2px, 2px);
transform: translate(-1.2px, 2px);
}
66.66% {
-webkit-transform: translate(1.4px, 4px);
-moz-transform: translate(1.4px, 4px);
-ms-transform: translate(1.4px, 4px);
transform: translate(1.4px, 4px);
opacity: 1;
}
100% {
-webkit-transform: translate(-1.6px, 6px);
-moz-transform: translate(-1.6px, 6px);
-ms-transform: translate(-1.6px, 6px);
transform: translate(-1.6px, 6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.2 KiB

@@ -0,0 +1,273 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(7,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2"
style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(16,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,301 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(7,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2"
style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(16,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,160 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA slope="0.05" type="linear"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
50% {
-webkit-transform: translate(2px,0px);
-moz-transform: translate(2px,0px);
-ms-transform: translate(2px,0px);
transform: translate(2px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]></style>
</defs>
<g transform="translate(-4,-12)" filter="url(#blur)">
<g transform="translate(20,10)">
<g class="am-weather-cloud-2" style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)" d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z" fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2"/>
</g>
<g class="am-weather-snow-1" style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(7,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2"/>
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5"/>
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5"/>
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5"/>
</g>
</g>
<g class="am-weather-snow-2" style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(16,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2"/>
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5"/>
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5"/>
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

@@ -0,0 +1,334 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
@keyframes am-weather-snow-reverse {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(1.2px) translateY(2px);
-moz-transform: translateX(1.2px) translateY(2px);
-ms-transform: translateX(1.2px) translateY(2px);
transform: translateX(1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(-1.4px) translateY(4px);
-moz-transform: translateX(-1.4px) translateY(4px);
-ms-transform: translateX(-1.4px) translateY(4px);
transform: translateX(-1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(1.6px) translateY(6px);
-moz-transform: translateX(1.6px) translateY(6px);
-ms-transform: translateX(1.6px) translateY(6px);
transform: translateX(1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-3 {
-webkit-animation-name: am-weather-snow-reverse;
-moz-animation-name: am-weather-snow-reverse;
-ms-animation-name: am-weather-snow-reverse;
animation-name: am-weather-snow-reverse;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="translate(0,16)">
<g class="am-weather-sun"
style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
stroke-width="2" />
</g>
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(3,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2"
style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-3"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow-reverse;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow-reverse;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow-reverse;-webkit-animation-timing-function:linear">
<g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

@@ -0,0 +1,361 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** MOON
*/
@keyframes am-weather-moon {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.am-weather-moon {
-webkit-animation-name: am-weather-moon;
-moz-animation-name: am-weather-moon;
-ms-animation-name: am-weather-moon;
animation-name: am-weather-moon;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-ms-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-moz-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
-ms-transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
transform-origin: 12.5px 15.15px 0;
/* TODO FF CENTER ISSUE */
}
@keyframes am-weather-moon-star-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-1 {
-webkit-animation-name: am-weather-moon-star-1;
-moz-animation-name: am-weather-moon-star-1;
-ms-animation-name: am-weather-moon-star-1;
animation-name: am-weather-moon-star-1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes am-weather-moon-star-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.am-weather-moon-star-2 {
-webkit-animation-name: am-weather-moon-star-2;
-moz-animation-name: am-weather-moon-star-2;
-ms-animation-name: am-weather-moon-star-2;
animation-name: am-weather-moon-star-2;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
@keyframes am-weather-snow-reverse {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(1.2px) translateY(2px);
-moz-transform: translateX(1.2px) translateY(2px);
-ms-transform: translateX(1.2px) translateY(2px);
transform: translateX(1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(-1.4px) translateY(4px);
-moz-transform: translateX(-1.4px) translateY(4px);
-ms-transform: translateX(-1.4px) translateY(4px);
transform: translateX(-1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(1.6px) translateY(6px);
-moz-transform: translateX(1.6px) translateY(6px);
-ms-transform: translateX(1.6px) translateY(6px);
transform: translateX(1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-3 {
-webkit-animation-name: am-weather-snow-reverse;
-moz-animation-name: am-weather-snow-reverse;
-ms-animation-name: am-weather-snow-reverse;
animation-name: am-weather-snow-reverse;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1"
style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
<polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2"
style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
<polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon"
style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(3,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2"
style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-3"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow-reverse;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow-reverse;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow-reverse;-webkit-animation-timing-function:linear">
<g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

@@ -0,0 +1,224 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SNOW
*/
@keyframes am-weather-snow {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(-1.2px) translateY(2px);
-moz-transform: translateX(-1.2px) translateY(2px);
-ms-transform: translateX(-1.2px) translateY(2px);
transform: translateX(-1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(1.4px) translateY(4px);
-moz-transform: translateX(1.4px) translateY(4px);
-ms-transform: translateX(1.4px) translateY(4px);
transform: translateX(1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1.6px) translateY(6px);
-moz-transform: translateX(-1.6px) translateY(6px);
-ms-transform: translateX(-1.6px) translateY(6px);
transform: translateX(-1.6px) translateY(6px);
opacity: 0;
}
}
@keyframes am-weather-snow-reverse {
0% {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
33.33% {
-webkit-transform: translateX(1.2px) translateY(2px);
-moz-transform: translateX(1.2px) translateY(2px);
-ms-transform: translateX(1.2px) translateY(2px);
transform: translateX(1.2px) translateY(2px);
}
66.66% {
-webkit-transform: translateX(-1.4px) translateY(4px);
-moz-transform: translateX(-1.4px) translateY(4px);
-ms-transform: translateX(-1.4px) translateY(4px);
transform: translateX(-1.4px) translateY(4px);
opacity: 1;
}
100% {
-webkit-transform: translateX(1.6px) translateY(6px);
-moz-transform: translateX(1.6px) translateY(6px);
-ms-transform: translateX(1.6px) translateY(6px);
transform: translateX(1.6px) translateY(6px);
opacity: 0;
}
}
.am-weather-snow-1 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-2 {
-webkit-animation-name: am-weather-snow;
-moz-animation-name: am-weather-snow;
-ms-animation-name: am-weather-snow;
animation-name: am-weather-snow;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.am-weather-snow-3 {
-webkit-animation-name: am-weather-snow-reverse;
-moz-animation-name: am-weather-snow-reverse;
-ms-animation-name: am-weather-snow-reverse;
animation-name: am-weather-snow-reverse;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-2"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(3,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-2"
style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
<g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
<g class="am-weather-snow-3"
style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow-reverse;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow-reverse;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow-reverse;-webkit-animation-timing-function:linear">
<g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@@ -0,0 +1,260 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.19575" width="1.4937" height="1.4959">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA slope="0.05" type="linear"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px,0px);
-moz-transform: translate(-5px,0px);
-ms-transform: translate(-5px,0px);
transform: translate(-5px,0px);
}
50% {
-webkit-transform: translate(10px,0px);
-moz-transform: translate(10px,0px);
-ms-transform: translate(10px,0px);
transform: translate(10px,0px);
}
100% {
-webkit-transform: translate(-5px,0px);
-moz-transform: translate(-5px,0px);
-ms-transform: translate(-5px,0px);
transform: translate(-5px,0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
50% {
-webkit-transform: translate(2px,0px);
-moz-transform: translate(2px,0px);
-ms-transform: translate(2px,0px);
transform: translate(2px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
2% {
-webkit-transform: translate(0.3px,0.0px);
-moz-transform: translate(0.3px,0.0px);
-ms-transform: translate(0.3px,0.0px);
transform: translate(0.3px,0.0px);
}
4% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
6% {
-webkit-transform: translate(0.5px,0.4px);
-moz-transform: translate(0.5px,0.4px);
-ms-transform: translate(0.5px,0.4px);
transform: translate(0.5px,0.4px);
}
8% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
10% {
-webkit-transform: translate(0.3px,0.0px);
-moz-transform: translate(0.3px,0.0px);
-ms-transform: translate(0.3px,0.0px);
transform: translate(0.3px,0.0px);
}
12% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
14% {
-webkit-transform: translate(0.3px,0.0px);
-moz-transform: translate(0.3px,0.0px);
-ms-transform: translate(0.3px,0.0px);
transform: translate(0.3px,0.0px);
}
16% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
18% {
-webkit-transform: translate(0.3px,0.0px);
-moz-transform: translate(0.3px,0.0px);
-ms-transform: translate(0.3px,0.0px);
transform: translate(0.3px,0.0px);
}
20% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
22% {
-webkit-transform: translate(1px,0.0px);
-moz-transform: translate(1px,0.0px);
-ms-transform: translate(1px,0.0px);
transform: translate(1px,0.0px);
}
24% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
26% {
-webkit-transform: translate(-1px,0.0px);
-moz-transform: translate(-1px,0.0px);
-ms-transform: translate(-1px,0.0px);
transform: translate(-1px,0.0px);
}
28% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px,5.0px);
-moz-transform: translate(-1px,5.0px);
-ms-transform: translate(-1px,5.0px);
transform: translate(-1px,5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px,0.0px);
-moz-transform: translate(0.0px,0.0px);
-ms-transform: translate(0.0px,0.0px);
transform: translate(0.0px,0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]></style>
</defs>
<g id="thunder" transform="translate(-4,-12)" filter="url(#blur)">
<g transform="translate(20,10)">
<g class="am-weather-cloud-1" style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
<path transform="matrix(.6 0 0 .6 -10 -6)" d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z" fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2"/>
</g>
<path transform="translate(-20,-11)" d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z" fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2"/>
<g transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9" fill="#ffa500" stroke="#fff" style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -0,0 +1,367 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Tornado | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.16995" y="-.17864" width="1.3289" height="1.455">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style type="text/css">
<![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-1 {
0% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
50% {
-webkit-transform: translate(10px, 0px);
-moz-transform: translate(10px, 0px);
-ms-transform: translate(10px, 0px);
transform: translate(10px, 0px);
}
100% {
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
}
.am-weather-cloud-1 {
-webkit-animation-name: am-weather-cloud-1;
-moz-animation-name: am-weather-cloud-1;
animation-name: am-weather-cloud-1;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(2px, 0px);
-moz-transform: translate(2px, 0px);
-ms-transform: translate(2px, 0px);
transform: translate(2px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** STROKE
*/
@keyframes am-weather-stroke {
0% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
2% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
4% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
6% {
-webkit-transform: translate(0.5px, 0.4px);
-moz-transform: translate(0.5px, 0.4px);
-ms-transform: translate(0.5px, 0.4px);
transform: translate(0.5px, 0.4px);
}
8% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
10% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
12% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
14% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
16% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
18% {
-webkit-transform: translate(0.3px, 0.0px);
-moz-transform: translate(0.3px, 0.0px);
-ms-transform: translate(0.3px, 0.0px);
transform: translate(0.3px, 0.0px);
}
20% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
22% {
-webkit-transform: translate(1px, 0.0px);
-moz-transform: translate(1px, 0.0px);
-ms-transform: translate(1px, 0.0px);
transform: translate(1px, 0.0px);
}
24% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
26% {
-webkit-transform: translate(-1px, 0.0px);
-moz-transform: translate(-1px, 0.0px);
-ms-transform: translate(-1px, 0.0px);
transform: translate(-1px, 0.0px);
}
28% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
40% {
fill: orange;
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
65% {
fill: white;
-webkit-transform: translate(-1px, 5.0px);
-moz-transform: translate(-1px, 5.0px);
-ms-transform: translate(-1px, 5.0px);
transform: translate(-1px, 5.0px);
}
61% {
fill: orange;
}
100% {
-webkit-transform: translate(0.0px, 0.0px);
-moz-transform: translate(0.0px, 0.0px);
-ms-transform: translate(0.0px, 0.0px);
transform: translate(0.0px, 0.0px);
}
}
.am-weather-stroke {
-webkit-animation-name: am-weather-stroke;
-moz-animation-name: am-weather-stroke;
animation-name: am-weather-stroke;
-webkit-animation-duration: 1.11s;
-moz-animation-duration: 1.11s;
animation-duration: 1.11s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** Tornado
*/
@keyframes tornado {
0% {
-webkit-transform: translate(-5px, 30px) scale(1.0);
-moz-transform: translate(-5px, 30px) scale(1.0);
-ms-transform: translate(-5px, 30px) scale(1.0);
transform: translate(-5px, 30px) scale(1.0);
}
33% {
-webkit-transform: translate(-4px, 30px) scale(1.1);
-moz-transform: translate(-4px, 30px) scale(1.1);
-ms-transform: translate(-4px, 30px) scale(1.1);
transform: translate(-4px, 30px) scale(1.1);
}
66% {
-webkit-transform: translate(-6px, 30px) scale(1.1);
-moz-transform: translate(-6px, 30px) scale(1.1);
-ms-transform: translate(-6px, 30px) scale(1.1);
transform: translate(-6px, 30px) scale(1.1);
}
100% {
-webkit-transform: translate(-5px, 30px) scale(1.0);
-moz-transform: translate(-5px, 30px) scale(1.0);
-ms-transform: translate(-5px, 30px) scale(1.0);
transform: translate(-5px, 30px) scale(1.0);
}
}
#tornado {
-webkit-animation-name: tornado;
-moz-animation-name: tornado;
animation-name: tornado;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** Warning Symbol
*/
@keyframes error {
0% {
fill: #cc0000;
}
50% {
fill: #ff0000;
}
100% {
fill: #cc0000;
}
}
#Shape {
-webkit-animation-name: error;
-moz-animation-name: error;
animation-name: error;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="thunder" transform="translate(-3.9995 -8)" filter="url(#blur)">
<g transform="translate(20,5)">
<g id="tornado" transform="translate(-5,30)" fill="#1d1d1d" stroke="#fff"
style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:tornado;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:tornado;-webkit-animation-timing-function:linear">
<path id="Polygon"
d="m9.239 0h2.1597c1.403 0 2.7694 0.44812 3.9 1.279l0.07492 0.055065c0.84792 0.62321 1.0301 1.8158 0.40688 2.6637-0.06273 0.085346-0.13246 0.16531-0.20848 0.23907l-2.8266 2.7425c-1.0913 1.0589-1.8597 2.4058-2.2157 3.8841-0.35503 1.4743-1.1473 2.8068-2.2729 3.823l-3.1203 2.8168-1.9597 1.3737c-0.85678 0.60058-2.0382 0.3929-2.6388-0.46388-0.5411-0.77192-0.43235-1.8242 0.25517-2.4692l1.0781-0.9966c1.2556-1.1607 1.9695-2.793 1.9695-4.5029 0-1.7724-0.33249-3.529-0.98022-5.1788l-1.5105-3.8473c-0.20966-0.53401 0.053275-1.1369 0.58729-1.3465 0.12094-0.047481 0.24971-0.071854 0.37963-0.071854h6.922z" />
</g>
<g class="am-weather-cloud-1"
style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
<path transform="matrix(.6 0 0 .6 -10 -6)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#666" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#333" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke"
points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9" fill="#ffa500"
stroke="#fff" />
</g>
<g id="error" transform="translate(20,30)">
<path id="Shape"
d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
fill="#c00"
style="-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:error;-moz-animation-timing-function:linear;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:error;-webkit-animation-timing-function:linear" />
<path id="Line" d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
<circle id="Oval" cx="9.5" cy="13" r="1" fill="#fff" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Tropical Storm | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
<![CDATA[
@keyframes storm {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
#storm {
-webkit-animation-name: storm;
-moz-animation-name: storm;
animation-name: storm;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
transform-origin: 50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]>
</style>
</defs>
<g id="storm" transform="translate(-4 -12)" fill="none" fill-rule="evenodd"
style="-moz-animation-duration:5s;-moz-animation-iteration-count:infinite;-moz-animation-name:storm;-moz-animation-timing-function:linear;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:storm;-webkit-animation-timing-function:linear">
<g transform="translate(20,20)" fill="#c00" fill-rule="nonzero">
<path
d="m18.478 0.091701c-0.61699 0.032955-0.87551 0.052836-1.299 0.097701-2.6916 0.28791-5.2645 1.157-7.3542 2.4817-2.0047 1.2706-3.5447 2.9466-4.449 4.8418-0.64953 1.3617-0.97546 2.775-1.0354 4.4867-0.00998 0.2786 0 0.89543 0.017438 1.1266 0.099955 1.3023 0.42346 2.3707 1.0392 3.426 0.10993 0.18887 0.3547 0.56928 0.58202 0.906 0.65079 0.96018 0.79937 1.3128 0.77942 1.8477-0.00998 0.28666-0.078652 0.52701-0.25231 0.88621-0.21106 0.4346-0.47712 0.80964-0.83434 1.1781-0.79685 0.82021-1.9047 1.3921-3.3573 1.7328-0.64575 0.15188-1.5463 0.26543-2.1021 0.26543-0.11371 0-0.20863 0.0053-0.21231 0.01057-0.012494 0.02113 0.76063 0.19684 1.2914 0.29194 0.77942 0.14131 1.4439 0.22182 2.3357 0.28128 0.34966 0.02373 1.8622 0.02373 2.2107 0 1.525-0.10298 2.8066-0.31961 4.1155-0.69734 1.6312-0.47024 3.1775-1.1755 4.4715-2.0393 2.2807-1.5201 3.8832-3.5303 4.6589-5.8443 0.28971-0.86373 0.45213-1.7249 0.53825-2.866 0.02625-0.3394 0.03002-1.1913 0.0076-1.5056-0.09618-1.3287-0.40593-2.3787-1.0117-3.434-0.15245-0.26543-0.36971-0.60484-0.67703-1.0565-0.52701-0.77534-0.70067-1.1636-0.72063-1.6127-0.01501-0.31433 0.05366-0.60224 0.2373-0.98919 0.3947-0.8374 1.0604-1.548 1.9509-2.0802 1.1179-0.66967 2.6817-1.0843 4.3191-1.1438 0.13492-0.005284 0.24485-0.01191 0.24234-0.013254-0.01-0.010567-0.44836-0.11355-0.77187-0.18224-0.70445-0.14919-1.4876-0.26678-2.2033-0.33152-0.592-0.052836-0.81187-0.06206-1.6236-0.066-0.44593-0.0013433-0.84809-0.0013433-0.89312 0.0013433zm-5.9765 9.4961c0.672 0.10299 1.2902 0.53884 1.645 1.1623 0.22733 0.39887 0.33591 0.80955 0.33591 1.2798 0 0.66958-0.23604 1.2732-0.68189 1.7434-0.36099 0.38302-0.79191 0.61415-1.3053 0.69994-0.17609 0.03036-0.52333 0.03036-0.69321 0-0.51829-0.08982-0.94796-0.31961-1.304-0.69466-0.35838-0.37907-0.58328-0.85057-0.66445-1.3987-0.022472-0.1466-0.022472-0.55334 0-0.70003 0.081168-0.54806 0.30724-1.0222 0.66445-1.3986 0.52836-0.55737 1.2528-0.80696 2.0034-0.6934z" />
</g>
</g>
<g class="warning" transform="translate(36,28)">
<path
d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
fill="#c00" />
<path d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
<circle cx="9.5" cy="13" r="1" fill="#fff" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="64" height="64" version="1.0" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-15.062,-16.984)">
<g transform="matrix(.65 0 0 .65 6.8517 5.8403)">
<g transform="matrix(.45542 0 0 .45542 26.271 23.868)" fill="#ffd42a" stroke-width="1.3153">
<path
d="m12.473 121.08c-0.914 1.76-1.991 3.41-1.991 5.34l9e-3 0.81c0 4.17 3.266 6.69 7.02 6.69h121.32c3.76 0 6.99-3.12 6.99-7.29l-0.04-0.81c0-1.94-0.95-3.62-1.99-5.35l-60.084-107.78c-2.655-2.9458-6.959-2.9458-9.614 4e-3l-60.809 107.09z"
fill="#ffd42a" stroke="#000" stroke-width="8.9852" />
</g>
<circle transform="matrix(.54212 0 0 .54212 49.546 33.731)" cx="23.921" cy="74.475" r="8.0416"
stroke-width="1.73" />
<path
d="m62.486 43.817c1.713 0 4.371 1.365 4.371 3.06l-1.279 17.615c0 1.695-1.379 3.06-3.092 3.06s-3.091-1.365-3.091-3.06l-1.493-17.615c0-1.695 2.871-3.06 4.584-3.06z"
stroke-width="1.3153" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16 -2)" filter="url(#blur)">
<g class="am-weather-wind" transform="translate(-16,10)" fill="none" stroke="#57A0EE" stroke-linecap="round"
stroke-width="2">
<path stroke-dasharray="150 10" d="M25.5 5A4 4 0 1 1 29 11H10">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0s" />
</path>
<path stroke-dasharray="144 16"
d="M39.5 11A4 4 0 1 1 43 17H6">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.5s" />
</path>
<path stroke-dasharray="150 10"
d="M28.5 29A4 4 0 1 0 32 23H15">
<animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" values="0; 160" begin="0.25s" />
</path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because it is too large. Load diff
@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="6.5969443mm"
height="6.5969443mm"
viewBox="0 0 6.5969443 6.5969443"
version="1.1"
id="svg29534"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs29531">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath24187">
<path
d="M 0,0 H 1920 V 1080 H 0 Z"
id="path24185" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-84.794748,-99.896436)">
<g
id="g24181"
transform="matrix(0.35277777,0,0,-0.35277777,-251.10257,243.16792)">
<g
id="g24183"
clip-path="url(#clipPath24187)">
<g
id="g24189"
transform="translate(964.5726,399.7967)">
<path
d="m 0,0 c -0.692,-0.337 -1.037,-1.141 -0.951,-1.743 0.057,-0.398 -0.31,-0.356 -0.31,-0.356 -0.517,0.132 -0.323,0.957 -0.323,0.957 0.247,3.24 -2.226,4.446 -2.244,4.454 0.909,-1.042 0.309,-3.425 -0.457,-4.037 L 1.132,-3.817 C 1.061,-3.68 0.979,-3.543 0.886,-3.407 -0.78,-0.964 0,0 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24191" />
</g>
<g
id="g24193"
transform="translate(958.9894,399.812)">
<path
d="M 0,0 0.44,-0.251 C 0.461,0.156 0.664,0.609 0.668,0.617 0.382,0.439 0.166,0.229 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24195" />
</g>
<g
id="g24197"
transform="translate(962.7297,390.6921)">
<path
d="M 0,0 C 1.017,0.285 1.915,0.854 2.528,1.587 L 1.393,2.234 C 1.425,1.654 1.068,0.951 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24199" />
</g>
<g
id="g24201"
transform="translate(959.6268,395.1216)">
<path
d="m 0,0 c -0.148,-1.156 0.629,-1.75 0.996,-1.54 0.199,0.113 0.092,0.531 0.092,0.531 C 1,-0.712 0.955,-0.431 0.941,-0.166 L -1.276,1.099 C -1.323,1.021 -1.386,0.965 -1.475,0.939 -2.107,0.757 -2.22,1.38 -2.239,1.649 -2.244,1.72 -2.243,1.767 -2.243,1.767 -2.256,1.735 -2.268,1.704 -2.28,1.672 -4.274,-3.383 1.237,-4.444 1.55,-4.5 -1.502,-2.264 0,0 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24203" />
</g>
<g
id="g24205"
transform="translate(961.4999,406.1239)">
<path
d="m 0,0 c -5.156,0 -9.35,-4.194 -9.35,-9.35 0,-5.155 4.194,-9.35 9.35,-9.35 5.156,0 9.35,4.195 9.35,9.35 C 9.35,-4.194 5.156,0 0,0 m 0,-1.909 c 4.103,0 7.441,-3.338 7.441,-7.441 0,-1.116 -0.248,-2.175 -0.691,-3.126 l -12.874,7.347 c 1.344,1.944 3.587,3.22 6.124,3.22 m 0,-14.882 c -4.103,0 -7.441,3.338 -7.441,7.441 0,0.886 0.156,1.735 0.441,2.524 L 4.192,-13.214 5.73,-14.092 C 4.364,-15.74 2.303,-16.791 0,-16.791"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24207" />
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="6.5969443mm"
height="6.5969443mm"
viewBox="0 0 6.5969443 6.5969443"
version="1.1"
id="svg29534"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs29531">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath24187">
<path
d="M 0,0 H 1920 V 1080 H 0 Z"
id="path24185" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-84.794748,-99.896436)">
<g
id="g24181"
transform="matrix(0.35277777,0,0,-0.35277777,-251.10257,243.16792)"
style="fill:#ffffff;fill-opacity:1">
<g
id="g24183"
clip-path="url(#clipPath24187)"
style="fill:#ffffff;fill-opacity:1">
<g
id="g24189"
transform="translate(964.5726,399.7967)"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 0,0 c -0.692,-0.337 -1.037,-1.141 -0.951,-1.743 0.057,-0.398 -0.31,-0.356 -0.31,-0.356 -0.517,0.132 -0.323,0.957 -0.323,0.957 0.247,3.24 -2.226,4.446 -2.244,4.454 0.909,-1.042 0.309,-3.425 -0.457,-4.037 L 1.132,-3.817 C 1.061,-3.68 0.979,-3.543 0.886,-3.407 -0.78,-0.964 0,0 0,0"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24191" />
</g>
<g
id="g24193"
transform="translate(958.9894,399.812)"
style="fill:#ffffff;fill-opacity:1">
<path
d="M 0,0 0.44,-0.251 C 0.461,0.156 0.664,0.609 0.668,0.617 0.382,0.439 0.166,0.229 0,0"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24195" />
</g>
<g
id="g24197"
transform="translate(962.7297,390.6921)"
style="fill:#ffffff;fill-opacity:1">
<path
d="M 0,0 C 1.017,0.285 1.915,0.854 2.528,1.587 L 1.393,2.234 C 1.425,1.654 1.068,0.951 0,0"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24199" />
</g>
<g
id="g24201"
transform="translate(959.6268,395.1216)"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 0,0 c -0.148,-1.156 0.629,-1.75 0.996,-1.54 0.199,0.113 0.092,0.531 0.092,0.531 C 1,-0.712 0.955,-0.431 0.941,-0.166 L -1.276,1.099 C -1.323,1.021 -1.386,0.965 -1.475,0.939 -2.107,0.757 -2.22,1.38 -2.239,1.649 -2.244,1.72 -2.243,1.767 -2.243,1.767 -2.256,1.735 -2.268,1.704 -2.28,1.672 -4.274,-3.383 1.237,-4.444 1.55,-4.5 -1.502,-2.264 0,0 0,0"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24203" />
</g>
<g
id="g24205"
transform="translate(961.4999,406.1239)"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 0,0 c -5.156,0 -9.35,-4.194 -9.35,-9.35 0,-5.155 4.194,-9.35 9.35,-9.35 5.156,0 9.35,4.195 9.35,9.35 C 9.35,-4.194 5.156,0 0,0 m 0,-1.909 c 4.103,0 7.441,-3.338 7.441,-7.441 0,-1.116 -0.248,-2.175 -0.691,-3.126 l -12.874,7.347 c 1.344,1.944 3.587,3.22 6.124,3.22 m 0,-14.882 c -4.103,0 -7.441,3.338 -7.441,7.441 0,0.886 0.156,1.735 0.441,2.524 L 4.192,-13.214 5.73,-14.092 C 4.364,-15.74 2.303,-16.791 0,-16.791"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24207" />
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

@@ -0,0 +1,922 @@
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function s(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}var i=function(){return i=Object.assign||function(t){for(var e,i=1,s=arguments.length;i<s;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},i.apply(this,arguments)};function s(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}function o(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],s=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&s>=t.length&&(t=void 0),{value:t&&t[s++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const n=window,r=n.ShadowRoot&&(void 0===n.ShadyCSS||n.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,a=Symbol(),c=new WeakMap;class l{constructor(t,e,i){if(this._$cssResult$=!0,i!==a)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(r&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=c.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&c.set(e,t))}return t}toString(){return this.cssText}}const h=r?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new l("string"==typeof t?t:t+"",void 0,a))(e)})(t):t
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/;var d;const u=window,_=u.trustedTypes,p=_?_.emptyScript:"",g=u.reactiveElementPolyfillSupport,f={toAttribute(t,e){switch(e){case Boolean:t=t?p:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},v=(t,e)=>e!==t&&(e==e||t==t),m={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v};class y extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this._$Ep(i,e);void 0!==s&&(this._$Ev.set(s,i),t.push(s))})),t}static createProperty(t,e=m){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||m}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(h(t))}else void 0!==t&&e.push(h(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{r?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style"),s=n.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=e.cssText,t.appendChild(i)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=m){var s;const o=this.constructor._$Ep(t,i);if(void 0!==o&&!0===i.reflect){const n=(void 0!==(null===(s=i.converter)||void 0===s?void 0:s.toAttribute)?i.converter:f).toAttribute(e,i.type);this._$El=t,null==n?this.removeAttribute(o):this.setAttribute(o,n),this._$El=null}}_$AK(t,e){var i;const s=this.constructor,o=s._$Ev.get(t);if(void 0!==o&&this._$El!==o){const t=s.getPropertyOptions(o),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(i=t.converter)||void 0===i?void 0:i.fromAttribute)?t.converter:f;this._$El=o,this[o]=n.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||v)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.foLine truncated
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var b;y.finalized=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:y}),(null!==(d=u.reactiveElementVersions)&&void 0!==d?d:u.reactiveElementVersions=[]).push("1.5.0");const w=window,x=w.trustedTypes,$=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,S=`lit$${(Math.random()+"").slice(9)}$`,E="?"+S,O=`<${E}>`,A=document,N=(t="")=>A.createComment(t),T=t=>null===t||"object"!=typeof t&&"function"!=typeof t,k=Array.isArray,M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,C=/-->/g,F=/>/g,P=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),L=/'/g,D=/"/g,U=/^(?:script|style|textarea|title)$/i,R=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),H=new WeakMap,V=A.createTreeWalker(A,129,null,!1);class j{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,n=0;const r=t.length-1,a=this.parts,[c,l]=((t,e)=>{const i=t.length-1,s=[];let o,n=2===e?"<svg>":"",r=M;for(let e=0;e<i;e++){const i=t[e];let a,c,l=-1,h=0;for(;h<i.length&&(r.lastIndex=h,c=r.exec(i),null!==c);)h=r.lastIndex,r===M?"!--"===c[1]?r=C:void 0!==c[1]?r=F:void 0!==c[2]?(U.test(c[2])&&(o=RegExp("</"+c[2],"g")),r=P):void 0!==c[3]&&(r=P):r===P?">"===c[0]?(r=null!=o?o:M,l=-1):void 0===c[1]?l=-2:(l=r.lastIndex-c[2].length,a=c[1],r=void 0===c[3]?P:'"'===c[3]?D:L):r===D||r===L?r=P:r===C||r===F?r=M:(r=P,o=void 0);const d=r===P&&t[e+1].startsWith("/>")?" ":"";n+=r===M?i+O:l>=0?(s.push(a),i.slice(0,l)+"$lit$"+i.slice(l)+S+d):i+S+(-2===l?(s.push(void 0),e):d)}const a=n+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==$?$.createHTML(a):a,s]})(t,e);if(this.el=j.createElement(c,i),V.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=V.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(S)){const i=l[n++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(S),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?G:"?"===e[1]?J:"@"===e[1]?Y:K})}else a.push({type:6,index:o})}for(const e of t)s.removeAttribute(e)}if(U.test(s.tagName)){const t=s.textContent.split(S),e=t.length-1;if(e>0){s.textContent=x?x.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],N()),V.nextNode(),a.push({type:2,index:++o});s.append(t[e],N())}}}else if(8===s.nodeType)if(s.data===E)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(S,t+1));)a.push({type:7,index:o}),t+=S.length-1}o++}}static createElement(t,e){const i=A.createElement("template");return i.innerHTML=t,i}}function I(t,e,i=t,s){var o,n,r,a;if(e===z)return e;let c=void 0!==s?null===(o=i._$Co)||void 0===o?void 0:o[s]:i._$Cl;const l=T(e)?void 0:e._$litDirective$;return(null==c?void 0:c.constructor)!==l&&(null===(n=null==c?void 0:c._$AO)||void 0===n||n.call(c,!1),void 0===l?c=void 0:(c=new l(t),c._$AT(t,i,s)),void 0!==s?(null!==(r=(a=i)._$Co)&&void 0!==r?r:a._$Co=[])[s]=c:i._$Cl=c),void 0!==c&&(e=I(t,c._$AS(t,e.values),c,s)),e}class B{constructor(t,e){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var e;const{el:{content:i},parts:s}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:A).importNode(i,!0);V.currentNode=o;let n=V.nextNode(),r=0,a=0,c=s[0];for(;void 0!==c;){if(r===c.index){let e;2===c.type?e=new q(n,n.nextSibling,this,t):1===c.type?e=new c.ctor(n,c.name,c.strings,this,t):6===c.type&&(e=new X(n,this,t)),this.u.push(e),c=s[++a]}r!==(null==c?void 0:c.index)&&(n=V.nextNode(),r++)}return o}p(t){let e=0;for(const i of this.u)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class q{constructor(t,e,i,s){var o;this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cm=null===(o=null==s?void 0:s.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=I(this,t,e),T(t)?t===W||null==t||""===t?(this._$AH!==W&&this._$AR(),this._$AH=W):t!==this._$AH&&t!==z&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>k(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.k(t):this.g(t)}O(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}g(t){this._$AH!==W&&T(this._$AH)?this._$AA.nextSibling.data=t:this.T(A.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,Line truncated
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class st{constructor(t,e){if(this._$cssResult$=!0,e!==et)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=it.get(this.cssText);return tt&&void 0===t&&(it.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const ot=t=>new st("string"==typeof t?t:t+"",et),nt=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new st(i,et)},rt=tt?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return ot(e)})(t):t
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/;var at;const ct=window.trustedTypes,lt=ct?ct.emptyScript:"",ht=window.reactiveElementPolyfillSupport,dt={toAttribute(t,e){switch(e){case Boolean:t=t?lt:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},ut=(t,e)=>e!==t&&(e==e||t==t),_t={attribute:!0,type:String,converter:dt,reflect:!1,hasChanged:ut};class pt extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;null!==(e=this.l)&&void 0!==e||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this._$Eh(i,e);void 0!==s&&(this._$Eu.set(s,i),t.push(s))})),t}static createProperty(t,e=_t){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||_t}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(rt(t))}else void 0!==t&&e.push(rt(t));return e}static _$Eh(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$Eg)&&void 0!==e?e:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$Eg)||void 0===e||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{tt?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style"),s=window.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=e.cssText,t.appendChild(i)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ES(t,e,i=_t){var s,o;const n=this.constructor._$Eh(t,i);if(void 0!==n&&!0===i.reflect){const r=(null!==(o=null===(s=i.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==o?o:dt.toAttribute)(e,i.type);this._$Ei=t,null==r?this.removeAttribute(n):this.setAttribute(n,r),this._$Ei=null}}_$AK(t,e){var i,s,o;const n=this.constructor,r=n._$Eu.get(t);if(void 0!==r&&this._$Ei!==r){const t=n.getPropertyOptions(r),a=t.converter,c=null!==(o=null!==(s=null===(i=a)||void 0===i?void 0:i.fromAttribute)&&void 0!==s?s:"function"==typeof a?a:null)&&void 0!==o?o:dt.fromAttribute;this._$Ei=r,this[r]=c(e,t.type),this._$Ei=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||ut)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$Ei!==t&&(void 0===this._$E_&&(this._$E_=new Map),this._$E_.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$Ep=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ep}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,e)=>this[e]=t)),this._$Et=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$Eg)||void 0===t||t.forEach(Line truncated
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var gt,ft;pt.finalized=!0,pt.elementProperties=new Map,pt.elementStyles=[],pt.shadowRootOptions={mode:"open"},null==ht||ht({ReactiveElement:pt}),(null!==(at=globalThis.reactiveElementVersions)&&void 0!==at?at:globalThis.reactiveElementVersions=[]).push("1.2.1");class vt extends pt{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,i)=>{var s,o;const n=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new q(e.insertBefore(N(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return z}}vt.finalized=!0,vt._$litElement$=!0,null===(gt=globalThis.litElementHydrateSupport)||void 0===gt||gt.call(globalThis,{LitElement:vt});const mt=globalThis.litElementPolyfillSupport;null==mt||mt({LitElement:vt}),(null!==(ft=globalThis.litElementVersions)&&void 0!==ft?ft:globalThis.litElementVersions=[]).push("3.1.2");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const yt=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:s}=e;return{kind:i,elements:s,finisher(e){customElements.define(t,e)}}})(t,e)
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/,bt=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function wt(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):bt(t,e)
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/}function xt(t){return wt({...t,state:!0})}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const $t=({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s){const s=null!==(o=i.originalKey)&&void 0!==o?o:i.key,n=null!=e?{kind:"method",placement:"prototype",key:s,descriptor:e(i.key)}:{...i,key:s};return null!=t&&(n.finisher=function(e){t(e,s)}),n}{const o=i.constructor;void 0!==e&&Object.defineProperty(i,s,e(s)),null==t||t(o,s)}}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/;var St;const Et=null!=(null===(St=window.HTMLSlotElement)||void 0===St?void 0:St.prototype.assignedElements)?(t,e)=>t.assignedElements(e):(t,e)=>t.assignedNodes(e).filter((t=>t.nodeType===Node.ELEMENT_NODE));function Ot(t){const{slot:e,selector:i}=null!=t?t:{};return $t({descriptor:s=>({get(){var s;const o="slot"+(e?`[name=${e}]`:":not([name])"),n=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(o),r=null!=n?Et(n,t):[];return i?r.filter((t=>t.matches(i))):r},enumerable:!0,configurable:!0})})}var At,Nt,Tt=function(t){return new Intl.DateTimeFormat(t.language,{year:"numeric",month:"long",day:"numeric"})};!function(t){t.language="language",t.system="system",t.comma_decimal="comma_decimal",t.decimal_comma="decimal_comma",t.space_comma="space_comma",t.none="none"}(At||(At={})),function(t){t.language="language",t.system="system",t.am_pm="12",t.twenty_four="24"}(Nt||(Nt={}));var kt=function(t){if(t.time_format===Nt.language||t.time_format===Nt.system){var e=t.time_format===Nt.language?t.language:void 0,i=(new Date).toLocaleString(e);return i.includes("AM")||i.includes("PM")}return t.time_format===Nt.am_pm},Mt=function(t){return new Intl.DateTimeFormat(t.language,{year:"numeric",month:"long",day:"numeric",hour:kt(t)?"numeric":"2-digit",minute:"2-digit",hour12:kt(t)})},Ct=function(t){return new Intl.DateTimeFormat(t.language,{hour:"numeric",minute:"2-digit",hour12:kt(t)})};var Ft=["closed","locked","off"],Pt=function(t,e,i,s){s=s||{},i=null==i?{}:i;var o=new Event(e,{bubbles:void 0===s.bubbles||s.bubbles,cancelable:Boolean(s.cancelable),composed:void 0===s.composed||s.composed});return o.detail=i,t.dispatchEvent(o),o},Lt=function(t){Pt(window,"haptic",t)},Dt=function(t,e,i,s){if(s||(s={action:"more-info"}),!s.confirmation||s.confirmation.exemptions&&s.confirmation.exemptions.some((function(t){return t.user===e.user.id}))||(Lt("warning"),confirm(s.confirmation.text||"Are you sure you want to "+s.action+"?")))switch(s.action){case"more-info":(i.entity||i.camera_image)&&Pt(t,"hass-more-info",{entityId:i.entity?i.entity:i.camera_image});break;case"navigate":s.navigation_path&&function(t,e,i){void 0===i&&(i=!1),i?history.replaceState(null,"",e):history.pushState(null,"",e),Pt(window,"location-changed",{replace:i})}(0,s.navigation_path);break;case"url":s.url_path&&window.open(s.url_path);break;case"toggle":i.entity&&(function(t,e){(function(t,e,i){void 0===i&&(i=!0);var s,o=function(t){return t.substr(0,t.indexOf("."))}(e),n="group"===o?"homeassistant":o;switch(o){case"lock":s=i?"unlock":"lock";break;case"cover":s=i?"open_cover":"close_cover";break;default:s=i?"turn_on":"turn_off"}t.callService(n,s,{entity_id:e})})(t,e,Ft.includes(t.states[e].state))}(e,i.entity),Lt("success"));break;case"call-service":if(!s.service)return void Lt("failure");var o=s.service.split(".",2);e.callService(o[0],o[1],s.service_data,s.target),Lt("success");break;case"fire-dom-event":Pt(t,"ll-custom",s)}};function Ut(t){return void 0!==t&&"none"!==t.action}var Rt=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var i=-1;return t.some((function(t,s){return t[0]===e&&(i=s,!0)})),i}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var i=t(this.__entries__,e),s=this.__entries__[i];return s&&s[1]},e.prototype.set=function(e,i){var s=t(this.__entries__,e);~s?this.__entries__[s][1]=i:this.__entries__.push([e,i])},e.prototype.delete=function(e){var i=this.__entries__,s=t(i,e);~s&&i.splice(s,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var i=0,s=this.__entries__;i<s.length;i++){var o=s[i];t.call(e,o[1],o[0])}},e}()}(),zt="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,Wt="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),Ht="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(Wt):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)};var Vt=["top","right","bottom","left","width","height","size","weight"],jt="undefined"!=typeof MutationObserver,It=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var i=!1,s=!1,o=0;function n(){i&&(i=!1,t()),s&&a()}function r(){Ht(n)}function a(){var t=Date.now();if(i){if(t-o<2)return;s=!0}else i=!0,s=!1,setTimeout(r,e);o=t}return a}(this.refresh.bind(this),20)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,i=e.indexLine truncated
<div class="current-temp">
<div class="temp" id="current-temp-text">${this.currentTemperature}</div>
<div class="unit-temp-big">${this.getUOM("temperature")}</div>
</div>
`,c=this.currentApparentTemperature,l=""!=c?R`
<div class="apparent-temp">
<div class="apparent">${this.localeTextFeelsLike}&nbsp;${c}</div>
<div class="unit-temp-small"> ${this.getUOM("temperature")}</div>
</div>
`:R``,h=!0===this._config.option_show_overview_separator?R`<hr class=line>`:"",d=this._config.entity_summary&&this.hass.states[this._config.entity_summary]?null!==(e=R`<div class="forecast-text">${ae(this.hass.localize,this.hass.states[this._config.entity_summary],re(this.hass))}</div>`)&&void 0!==e?e:R`<div class="forecast-text">---</div>`:R``;return R`
<div class="overview-section section">
${this._config.text_card_title?R`<div class="card-header">${this._config.text_card_title}</div>`:R``}
${this._config.text_card_title_2?R`<div class="card-header">${this._config.text_card_title_2}</div>`:R``}
${this._config.entity_update_time?R`<div class="updated">${this._config.text_update_time_prefix?this._config.text_update_time_prefix+" ":""}${this._renderUpdateTime()}</div>`:R``}
<div class="overview-top">
<div class="top-left">${r}${n}</div>
<div class="currentTemps">${a}${l}</div>
</div>
${d}
${h}
</div>
`}_renderObservationsOverviewSection(){var t;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_overview))return R``;const e=this._cardWidth>=344?" stacked":"",i=R`
<div class="current-temp">
<div class="temp" id="current-temp-text">${this.currentTemperature}</div>
<div class="unit-temp-big">${this.getUOM("temperature")}</div>
</div>
`,s=this.currentApparentTemperature,o=""!=s?R`
<div class="apparent-temp">
<div class="apparent">${this.localeTextFeelsLike}&nbsp;${s}</div>
<div class="unit-temp-small"> ${this.getUOM("temperature")}</div>
</div>
`:R``,n=!0===this._config.option_show_overview_separator?R`<hr class=line>`:"";return R`
<div class="overview-section section${e}">
${this._config.text_card_title?R`<div class="card-header">${this._config.text_card_title}</div>`:R``}
${this._config.text_card_title_2?R`<div class="card-header">${this._config.text_card_title_2}</div>`:R``}
${this._config.entity_update_time?R`<div class="updated">${this._config.text_update_time_prefix?this._config.text_update_time_prefix+" ":""}${this._renderUpdateTime()}</div>`:R``}
</div>
<div class="overview-section section">
<div class="overview-top">
<div class="top-left-obs"></div>
<div class="currentTemps">${i}${o}</div>
</div>
${n}
</div>
`}_renderTitleOnlyOverviewSection(){var t;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_overview))return R``;const e=!0===this._config.option_show_overview_separator?R`<hr class=line>`:"";return R`
<div class="overview-section section">
${this._config.text_card_title?R`<div class="card-header">${this._config.text_card_title}</div>`:R``}
${this._config.text_card_title_2?R`<div class="card-header">${this._config.text_card_title_2}</div>`:R``}
${this._config.entity_update_time?R`<div class="updated">${this._config.text_update_time_prefix?this._config.text_update_time_prefix+" ":""}${this._renderUpdateTime()}</div>`:R``}
${e}
</div>
`}_renderForecastOverviewSection(){var t,e;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_overview))return R``;const i=this._weatherIcon(this.forecastIcon),s=new URL((this._config.option_static_icons?"s-":"a-")+i+".svg",import.meta.url),o="unknown"!==i?"":`Unknown condition\n${this.forecastIcon}`,n="unknown"!==i?R``:R`<div class="unknown-forecast">${this.forecastIcon}</div>`,r=R`<div class="big-icon"><img src="${s.href}" width="100%" height="100%" title="${o}"></div>`,a=!0===this._config.option_show_overview_separator?R`<hr class=line>`:"",c=this._config.entity_summary&&this.hass.states[this._config.entity_summary]?null!==(e=R`<div class="forecast-text-right">${ae(this.hass.localize,this.hass.states[this._config.entity_summary],re(this.hass))}</div>`)&&void 0!==e?e:R`<div class="forecast-text-right">---</div>`:R``;return R`
<div class="overview-section section">
${this._config.text_card_title?R`<div class="card-header">${this._config.text_card_title}</div>`:R``}
${this._config.text_card_title_2?R`<div class="card-header">${this._config.text_card_title_2}</div>`:R``}
${this._config.entity_update_time?R`<div class="updated">${this._config.text_update_time_prefix?this._config.text_update_time_prefix+" ":""}${this._renderUpdateTime()}</div>`:R``}
<div class="overview-top">
<div class="top-left">${r}${n}</div>
${c}
</div>
${a}
</div>
`}_getCardSizeOverviewSection(){var t=0;if(!1!==this._config.show_section_overview){if("observations"===this._config.overview_layout)return 76;t=16,t+=void 0!==this._config.text_card_title?20:0,t+=void 0!==this._config.text_card_title_2?20:0,t+=void 0!==this._config.entity_update_time?20:0,"title only"!==this._config.overview_layout&&(t+="forecast"!==this._config.overview_layout&&void 0!==this._config.entity_summary?145:120)}return t}_renderOverviewSection(){var t;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_overview))return R``;switch(this._config.overview_layout||"complete"){case"observations":return this._renderObservationsOverviewSection();case"forecast":return this._renderForecastOverviewSection();case"title only":return this._renderTitleOnlyOverviewSection();default:return this._renderCompleteOverviewSection()}}_getCardSizeExtendedSection(){var t=0;return!1!==this._config.show_section_extended&&(t+=16,t+=this._config.entity_extended?40:0,t+=void 0!==this._config.entity_todays_uv_forecast||void 0!==this._config.entity_todays_fire_danger?20:0),t}_renderExtendedSection(){var t;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_extended)||void 0===this._config.entity_extended&&void 0===this._config.entity_todays_uv_forecast&&void 0===this._config.entity_todays_fire_danger)return R``;const e=this._config.entity_extended||"";var i=[];if(void 0!==this.hass.states[e])if(!0===this._config.extended_use_attr){if(void 0!==this._config.extended_name_attr){const t=this._config.extended_name_attr.toLowerCase().split(".").reduce(((t,e)=>void 0!==t?t[e]:void 0),this.hass.states[e].attributes);void 0!==t&&i.push(R`${t}`)}}else void 0!==this.hass.states[e]&&i.push(R`${this.hass.states[e].state}`);return i.push(R`${this._config.entity_todays_uv_forecast&&this.hass.states[this._config.entity_todays_uv_forecast]&&"unknown"!==this.hass.states[this._config.entity_todays_uv_forecast].state?" "+this.hass.states[this._config.entity_todays_uv_forecast].state:""}`),i.push(R`${this._config.entity_todays_fire_danger&&this.hass.states[this._config.entity_todays_fire_danger]&&"unknown"!==this.hass.states[this._config.entity_todays_fire_danger].state?" "+this.hass.states[this._config.entity_todays_fire_danger].state:""}`),R`
<div class="extended-section section">
<div class="f-extended">
${i}
</div>
</div>
`}_getCardSizeSlotsSection(){var t=0;if(!1!==this._config.show_section_slots){var e=("remove"!==this._config.slot_l1?1:0)+("remove"!==this._config.slot_l2?1:0)+("remove"!==this._config.slot_l3?1:0)+("remove"!==this._config.slot_l4?1:0)+("remove"!==this._config.slot_l5?1:0)+(void 0!==this._config.slot_l6&&"remove"!==this._config.slot_l6?1:0)+(void 0!==this._config.slot_l7&&"remove"!==this._config.slot_l7?1:0)+(void 0!==this._config.slot_l8&&"remove"!==this._config.slot_l8?1:0),i=("remove"!==this._config.slot_r1?1:0)+("remove"!==this._config.slot_r2?1:0)+("remove"!==this._config.slot_r3?1:0)+("remove"!==this._config.slot_r4?1:0)+("remove"!==this._config.slot_r5?1:0)+(void 0!==this._config.slot_r6&&"remove"!==this._config.slot_r6?1:0)+(void 0!==this._config.slot_r7&&"remove"!==this._config.slot_r7?1:0)+(void 0!==this._config.slot_r8&&"remove"!==this._config.slot_r8?1:0);t+=16+24*Math.max(e,i)}return t}_renderSlotsSection(){var t;if(!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_slots))return R``;var e=!0===this._config.use_old_column_format?R`
<div>
<ul class="variations-ugly">
<li>
<ul class="slot-list">${this.slotL1}${this.slotL2}${this.slotL3}${this.slotL4}${this.slotL5}${this.slotL6}${this.slotL7}${this.slotL8}</ul>
</li>
<li>
<ul class="slot-list">${this.slotR1}${this.slotR2}${this.slotR3}${this.slotR4}${this.slotR5}${this.slotR6}${this.slotR7}${this.slotR8}</ul>
</li>
</ul>
</div>
`:R`
<div>
<ul class="variations">
<li class="slot-list-item-1">
<ul class="slot-list">
${this.slotL1}${this.slotL2}${this.slotL3}${this.slotL4}${this.slotL5}${this.slotL6}${this.slotL7}${this.slotL8}
</ul>
</li>
<li>
<ul class="slot-list">
${this.slotR1}${this.slotR2}${this.slotR3}${this.slotR4}${this.slotR5}${this.slotR6}${this.slotR7}${this.slotR8}
</ul>
</li>
</ul>
</div>
`;return R`
<div class="slot-section section">${e}</div>
`}_renderHorizontalDailyForecastSection(){var t,e,i,s,o,n,r;const a=[],c=this._config.daily_forecast_days||5;for(var l=0;l<c;l++){const y=new Date;var h,d,u;if(y.setDate(y.getDate()+l+1),null===(t=this._config.entity_forecast_icon_1)||void 0===t?void 0:t.match("^weather.")){const t=this._config.entity_forecast_icon_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,y,"condition");if(void 0===e)break;const i=new URL(((this._config.option_static_icons?"s-":"a-")+(t&&e?this._weatherIcon(e):"unknown")+".svg").replace("-night","-day"),import.meta.url);h=R`<li class="f-slot-horiz-icon"><i class="icon" style="background: none, url(${i.href}) no-repeat; background-size: contain;"></i></li>`}else{var _=!!this._config.entity_forecast_icon_1&&this._config.entity_forecast_icon_1.match(/(\d+)(?!.*\d)/g);const t=this._config.entity_forecast_icon_1?this._config.entity_forecast_icon_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l)):void 0;if(void 0===t||void 0===this.hass.states[t])break;const e=new URL(((this._config.option_static_icons?"s-":"a-")+(t&&this.hass.states[t]?this._weatherIcon(this.hass.states[t].state):"unknown")+".svg").replace("-night","-day"),import.meta.url);h=R`<i class="icon" style="background: none, url(${e.href}) no-repeat; background-size: contain;"></i>`}d=(null===(e=this._config.entity_forecast_max_1)||void 0===e?void 0:e.match("^weather."))?this._getForecastPropFromWeather(this.hass.states[this._config.entity_forecast_max_1].attributes.forecast,y,"temperature"):(_=!!this._config.entity_forecast_max_1&&this._config.entity_forecast_max_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_forecast_max_1?this.hass.states[this._config.entity_forecast_max_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l))].state:void 0,u=(null===(i=this._config.entity_forecast_min_1)||void 0===i?void 0:i.match("^weather."))?this._getForecastPropFromWeather(this.hass.states[this._config.entity_forecast_min_1].attributes.forecast,y,"templow"):(_=!!this._config.entity_forecast_min_1&&this._config.entity_forecast_min_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_forecast_min_1?this.hass.states[this._config.entity_forecast_min_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l))].state:void 0;const b=R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`,w=!0===this._config.old_daily_format?R`
<li class="f-slot-horiz-text">
<span>
<div class="slot-text highTemp">${d?Math.round(Number(d)):"---"}</div>
${b}
</span>
</li>
<li class="f-slot-horiz-text">
<span>
<div class="slot-text lowTemp">${u?Math.round(Number(u)):"---"}</div>
${b}
</span>
</li>`:"highlow"===this._config.tempformat?R`
<li class="f-slot-horiz-text">
<span>
<div class="slot-text highTemp">${d?Math.round(Number(d)):"---"}</div>
<div class="slot-text slash">/</div>
<div class="slot-text lowTemp">${u?Math.round(Number(u)):"---"}</div>
${b}
</span>
</li>`:R`
<li class="f-slot-horiz-text">
<span>
<div class="slot-text lowTemp">${u?Math.round(Number(u)):"---"}</div>
<div class="slot-text slash">/</div>
<div class="slot-text highTemp">${d?Math.round(Number(d)):"---"}</div>
${b}
</span>
</li>
`;var p,g,f;if(null===(s=this._config.entity_pop_1)||void 0===s?void 0:s.match("^weather.")){const t=this._config.entity_pop_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,y,"precipitation_probability");p=t?R`<li class="f-slot-horiz-text"><span><div class="slot-text pop">${this.hass.states[t]&&void 0!==e?Math.round(Number(e)):"---"}</div><div class="unit">%</div></span></li>`:R``}else{const t=(_=!!this._config.entity_pop_1&&this._config.entity_pop_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_pop_1?this._config.entity_pop_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l)):void 0;p=_?R`<li class="f-slot-horiz-text"><span><div class="slot-text pop">${t&&this.hass.states[t]?Math.round(Number(this.hass.states[t].state)):"---"}</div><div class="unit">%</div></span></li>`:R``}if(null===(o=this._config.entity_pos_1)||void 0===o?void 0:o.match("^weather.")){const t=this._config.entity_pos_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,y,"precipitation");g=t?R`<li class="f-slot-horiz-text"><span><div class="pos">${this.hass.states[t]&&void 0!==e?e:"---"}</div><div class="unit">${this.getUOM("precipitation")}</div></span></li>`:R``}else{const t=(_=!!this._config.entity_pos_1&&this._config.entity_pos_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_pos_1?this._config.entity_pos_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l)):void 0;g=_?R`<li class="f-slot-horiz-text"><span><div class="pos">${t&&this.hass.states[t]?this.hass.states[t].state:"---"}</div><div class="unit">${this.getUOM("precipitation")}</div></span></li>`:R``}if(null===(n=this._config.entity_summary_1)||void 0===n?void 0:n.match("^weather.")){const t=this._config.entity_summary_1,e=null!==(r=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,y,"detailed_description"))&&void 0!==r?r:this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,y,"condition");f=R`<div class="fcasttooltipblock" id="fcast-summary-${l}" style="width:${100*c}%;left:-${100*l}%;"><div class="fcasttooltiptext">${this.hass.states[t]&&void 0!==e?(v=this.hass.localize,m=e,v(`component.weather.state._.${m}`)||m):"---"}</div>
<span style="content:'';position:absolute;top:100%;left:${100/c/2+l*(100/c)}%;margin-left:-7.5px;border-width:7.5px;border-style:solid;border-color:#FFA100 transparent transparent transparent;"></span>
</div>`}else{const t=(_=!!this._config.entity_summary_1&&this._config.entity_summary_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_summary_1?this._config.entity_summary_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+l)):void 0;f=R`<div class="fcasttooltipblock" id="fcast-summary-${l}" style="width:${100*c}%;left:-${100*l}%;"><div class="fcasttooltiptext">${this._config.option_tooltips&&t?this.hass.states[t]?this.hass.states[t].state:"---":""}</div>
<span style="content:'';position:absolute;top:100%;left:${100/c/2+l*(100/c)}%;margin-left:-7.5px;border-width:7.5px;border-style:solid;border-color:#FFA100 transparent transparent transparent;"></span>
</div>`}a.push(R`
<div class="day-horiz fcasttooltip">
<ul class="f-slot-horiz">
<li class="f-slot-horiz-text"><span class="dayname">${y?y.toLocaleDateString(this.locale,{weekday:"short"}):"---"}</span></li>
${h}
${w}
${p}
${g}
</ul>
${f}
</div>
`)}var v,m;return R`
<div class="daily-forecast-horiz-section section">
${a}
</div>
`}_renderVerticalDailyForecastSection(){var t,e,i,s,o;const n=[],r=this._config.daily_forecast_days||5;for(var a=0;a<r;a++){const r=new Date;var c,l,h,d,u;if(r.setDate(r.getDate()+a+1),null===(t=this._config.entity_forecast_icon_1)||void 0===t?void 0:t.match("^weather.")){const t=this._config.entity_forecast_icon_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,r,"condition");if(void 0===e)break;const i=new URL(((this._config.option_static_icons?"s-":"a-")+(t&&e?this._weatherIcon(e):"unknown")+".svg").replace("-night","-day"),import.meta.url);c=R`<i class="icon" style="background: none, url(${i.href}) no-repeat; background-size: contain;"></i><br>`}else{var _=!!this._config.entity_forecast_icon_1&&this._config.entity_forecast_icon_1.match(/(\d+)(?!.*\d)/g);const t=_&&this._config.entity_forecast_icon_1?this._config.entity_forecast_icon_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0;if(!t||void 0===this.hass.states[t]||"unknown"===this.hass.states[t].state)break;const e=new URL(((this._config.option_static_icons?"s-":"a-")+(void 0!==this.hass.states[t]?this._weatherIcon(this.hass.states[t].state):"unknown")+".svg").replace("-night","-day"),import.meta.url);c=R`<i class="icon" style="background: none, url(${e.href}) no-repeat; background-size: contain;"></i><br>`}const v=(_=!!this._config.entity_summary_1&&this._config.entity_summary_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_summary_1?this._config.entity_summary_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0,m=_?R`
<div class="f-summary-vert">${v&&this.hass.states[v]?this.hass.states[v].state:"---"}</div>`:"";l=(null===(e=this._config.entity_forecast_max_1)||void 0===e?void 0:e.match("^weather."))?this._getForecastPropFromWeather(this.hass.states[this._config.entity_forecast_max_1].attributes.forecast,r,"temperature"):(_=!!this._config.entity_forecast_max_1&&this._config.entity_forecast_max_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_forecast_max_1?this.hass.states[this._config.entity_forecast_max_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a))].state:void 0,h=(null===(i=this._config.entity_forecast_min_1)||void 0===i?void 0:i.match("^weather."))?this._getForecastPropFromWeather(this.hass.states[this._config.entity_forecast_min_1].attributes.forecast,r,"templow"):(_=!!this._config.entity_forecast_min_1&&this._config.entity_forecast_min_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_forecast_min_1?this.hass.states[this._config.entity_forecast_min_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a))].state:void 0;const y=R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`,b=h?R`
<div class="f-slot-vert">
<div class="temp-label">Min: </div>
<div class="low-temp">${Math.round(Number(h))}</div>${y}
</div>`:R`---`,w=l?R`
<div class="f-slot-vert">
<div class="temp-label">Max: </div>
<div class="high-temp">${Math.round(Number(l))}</div>${y}
</div>`:R`---`;if(null===(s=this._config.entity_pop_1)||void 0===s?void 0:s.match("^weather.")){const t=this._config.entity_pop_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,r,"precipitation_probability");d=t?R`<div class="f-slot-vert"><div class="f-label">Chance of rain </div>
<div class="pop">${this.hass.states[t]&&void 0!==e?Math.round(Number(e)):"---"}</div><div class="unit">%</div></div>`:R``}else{const t=(_=!!this._config.entity_pop_1&&this._config.entity_pop_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_pop_1?this._config.entity_pop_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0;d=_?R`
<div class="f-slot-vert"><div class="f-label">Chance of rain </div>
<div class="pop">${t&&this.hass.states[t]?Math.round(Number(this.hass.states[t].state)):"---"}</div><div class="unit">%</div></div>`:R``}if(null===(o=this._config.entity_pos_1)||void 0===o?void 0:o.match("^weather.")){const t=this._config.entity_pos_1,e=this._getForecastPropFromWeather(this.hass.states[t].attributes.forecast,r,"precipitation");u=t?R`<div class="f-slot-vert"><div class="f-label">Possible rain </div>
<div class="pos">${this.hass.states[t]&&void 0!==e?e:"---"}</div><div class="unit">${this.getUOM("precipitation")}</div></div>`:R``}else{const t=(_=!!this._config.entity_pos_1&&this._config.entity_pos_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_pos_1?this._config.entity_pos_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0;u=_?R`
<div class="f-slot-vert"><div class="f-label">Possible rain </div>
<div class="pos">${t&&this.hass.states[t]?this.hass.states[t].state:"---"}</div>
<div class="unit">${this.getUOM("precipitation")}</div></div>`:R``}_=!!(this._config.entity_extended_1&&a<(0!==this._config.daily_extended_forecast_days?this._config.daily_extended_forecast_days||7:0))&&this._config.entity_extended_1.match(/(\d+)(?!.*\d)/g);var p=R``;if(a<(this._config.daily_extended_forecast_days?this._config.daily_extended_forecast_days:7))if(!0===this._config.daily_extended_use_attr){const t=(_=!!this._config.entity_extended_1&&this._config.entity_extended_1.match(/(\d+)(?!.*\d)/g))&&this._config.entity_extended_1?this._config.entity_extended_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):this._config.entity_extended_1;if(t&&void 0!==this.hass.states[t]){const e=null==(_=!!(this._config.daily_extended_name_attr&&a<(0!==this._config.daily_extended_forecast_days?this._config.daily_extended_forecast_days||7:0))&&this._config.daily_extended_name_attr.match(/(\d+)(?!.*\d)/g))&&t&&this._config.daily_extended_name_attr?this.hass.states[t].attributes[this._config.daily_extended_name_attr]:_&&this._config.daily_extended_name_attr&&t?this._config.daily_extended_name_attr.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)).toLowerCase().split(".").reduce(((t,e)=>void 0!==t?t[e]:void 0),this.hass.states[t].attributes):void 0;p=e?R`<div class="f-extended">${e}</div>`:R``}}else{const t=_&&this._config.entity_extended_1?this._config.entity_extended_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0;p=_?R`<div class="f-extended">${t&&this.hass.states[t]?this.hass.states[t].state:"---"}</div>`:R``}_=!!this._config.entity_fire_danger_1&&this._config.entity_fire_danger_1.match(/(\d+)(?!.*\d)/g);var g=R``;const x=_&&this._config.entity_fire_danger_1?this._config.entity_fire_danger_1.replace(/(\d+)(?!.*\d)/g,String(Number(_)+a)):void 0;if(_&&x){var f=!1!==this._config.option_daily_color_fire_danger&&this.hass.states[x].attributes.color_fill?`background-color:${this.hass.states[x].attributes.color_fill}; color:${this.hass.states[x].attributes.color_text};`:"";!1===this._config.option_daily_color_fire_danger?g=_&&"unknown"!==this.hass.states[x].state?R`
<div class="f-firedanger-vert">${x&&this.hass.states[x]?this.hass.states[x].state:"---"}</div>`:R``:(""===f&&(f="font-weight:300;"),g=_&&"unknown"!==this.hass.states[x].state?R`
<div class="f-firedanger-vert">
<p class="fire-danger-text-color" style="${f}">${x&&this.hass.states[x]?this.hass.states[x].state.toUpperCase():"---"}</p>
</div>`:R``)}n.push(R`
<div class="day-vert fcasttooltip">
<div class="day-vert-top">
<div class="dayname-vert">${r?r.toLocaleDateString(this.locale,{weekday:"short"}):"---"}</div>
${m}
</div>
<div>
${g}
</div>
<div class="day-vert-middle">
<div class="day-vert-dayicon">
${c}
</div>
<div class="day-vert-temps">
${b}
${w}
</div>
<div class="day-vert-rain">
${d}
${u}
</div>
</div>
<div class="day-vert-bottom">
${p}
</div>
</div>
`)}return R`
<div class="daily-forecast-vert-section section">
${n}
</div>
`}_getForecastPropFromWeather(t,e,i){const s=e.toDateString(),o=t.filter((t=>new Date(t.datetime).toDateString()===s));if(1===o.length)return void 0!==o[0][i]?String(o[0][i]):void 0;if(2===o.length){const t=o.find((t=>!0===t.daytime)),e=o.find((t=>!1===t.daytime));return"templow"===i?void 0!==e.temperature?String(e.temperature):void 0:void 0!==t[i]?String(t[i]):void 0}}_getCardSizeDailyForecastSection(){var t=0;return!1!==this._config.show_section_daily_forecast&&("vertical"!==this._config.daily_forecast_layout?t+=146:(t+=18+87*(this._config.daily_forecast_days||5),0!==this._config.daily_extended_forecast_days&&(t+=48*Math.min(this._config.daily_forecast_days||5,this._config.daily_extended_forecast_days||7)))),t}_renderDailyForecastSection(){var t;return!1===(null===(t=this._config)||void 0===t?void 0:t.show_section_daily_forecast)?R``:"vertical"!==this._config.daily_forecast_layout?this._renderHorizontalDailyForecastSection():this._renderVerticalDailyForecastSection()}render(){const t=[];this._checkForErrors()&&t.push(this._showConfigWarning(this._error));const e=[];return void 0!==this._config.section_order&&this._config.section_order.forEach((t=>{switch(t){case"overview":e.push(this._renderOverviewSection());break;case"extended":e.push(this._renderExtendedSection());break;case"slots":e.push(this._renderSlotsSection());break;case"daily_forecast":e.push(this._renderDailyForecastSection())}})),t.push(R`
<style>
${this.styles}
</style>
<ha-card class="card"
@action=${this._handleAction}
.actionHandler=${pe({hasHold:Ut(this._config.hold_action)})}
><div class="content">
${e}
</div>
</ha-card>
`),R`${t}`}_handleAction(t){this.hass&&this._config&&t.detail.action&&function(t,e,i,s){var o;"double_tap"===s&&i.double_tap_action?o=i.double_tap_action:"hold"===s&&i.hold_action?o=i.hold_action:"tap"===s&&i.tap_action&&(o=i.tap_action),Dt(t,e,i,o)}(this,this.hass,this._config,t.detail.action)}get slotL1(){return this.slotValue("l1",this._config.slot_l1)}get slotL2(){return this.slotValue("l2",this._config.slot_l2)}get slotL3(){return this.slotValue("l3",this._config.slot_l3)}get slotL4(){return this.slotValue("l4",this._config.slot_l4)}get slotL5(){return this.slotValue("l5",this._config.slot_l5)}get slotL6(){return this.slotValue("l6",this._config.slot_l6)}get slotL7(){return this.slotValue("l7",this._config.slot_l7)}get slotL8(){return this.slotValue("l8",this._config.slot_l8)}get slotR1(){return this.slotValue("r1",this._config.slot_r1)}get slotR2(){return this.slotValue("r2",this._config.slot_r2)}get slotR3(){return this.slotValue("r3",this._config.slot_r3)}get slotR4(){return this.slotValue("r4",this._config.slot_r4)}get slotR5(){return this.slotValue("r5",this._config.slot_r5)}get slotR6(){return this.slotValue("r6",this._config.slot_r6)}get slotR7(){return this.slotValue("r7",this._config.slot_r7)}get slotR8(){return this.slotValue("r8",this._config.slot_r8)}slotValue(t,e){switch(e){case"pop":return this.slotPop;case"popforecast":return this.slotPopForecast;case"possible_today":return this.slotPos;case"possible_tomorrow":return this.slotPossibleTomorrow;case"rainfall":return this.slotRainfall;case"humidity":return this.slotHumidity;case"pressure":return this.slotPressure;case"observed_max":return this.slotObservedMax;case"observed_min":return this.slotObservedMin;case"forecast_max":return this.slotForecastMax;case"forecast_min":return this.slotForecastMin;case"temp_next":return this.slotTempNext;case"temp_following":return this.slotTempFollowing;case"temp_maximums":return this.slotTempMaximums;case"temp_minimums":return this.slotTempMinimums;case"uv_summary":return this.slotUvSummary;case"fire_danger":return this.slotFireDanger;case"wind":return this.slotWind;case"wind_kt":return this.slotWindKt;case"visibility":return this.slotVisibility;case"sun_next":return this.slotSunNext;case"sun_following":return this.slotSunFollowing;case"custom1":return this.slotCustom1;case"custom2":return this.slotCustom2;case"custom3":return this.slotCustom3;case"custom4":return this.slotCustom4;case"empty":return this.slotEmpty;case"remove":return this.slotRemove}switch(t){case"l1":return this.slotForecastMax;case"l2":return this.slotForecastMin;case"l3":return this.slotWind;case"l4":return this.slotPressure;case"l5":return this.slotSunNext;case"l6":case"l7":case"l8":case"r6":case"r7":case"r8":return this.slotRemove;case"r1":return this.slotPopForecast;case"r2":return this.slotHumidity;case"r3":return this.slotUvSummary;case"r4":return this.slotFireDanger;case"r5":return this.slotSunFollowing}return this.slotEmpty}get slotEmpty(){return R`<li>&nbsp;</li>`}get slotRemove(){return R``}get slotPopForecast(){const t=this._config.entity_pop&&void 0!==this.hass.states[this._config.entity_pop]?null===this._config.entity_pop.match("^weather.")?Math.round(Number(this.hass.states[this._config.entity_pop].state)):void 0!==this.hass.states[this._config.entity_pop].attributes.forecast[0].precipitation_probability?Math.round(Number(this.hass.states[this._config.entity_pop].attributes.forecast[0].precipitation_probability)):"---":"---",e="---"!==t?R`<div class="slot-text unit">%</div>`:R``,i=this._config.entity_pos&&void 0!==this.hass.states[this._config.entity_pos]?null===this._config.entity_pos.match("^weather.")?this.hass.states[this._config.entity_pos].state:void 0!==this.hass.states[this._config.entity_pos].attributes.forecast[0].precipitation?this.hass.states[this._config.entity_pos].attributes.forecast[0].precipitation:"---":"---",s="---"!==i?R`<div class="slot-text unit">${this.getUOM("precipitation")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-rainy"></ha-icon>
</div>
<div class="slot-text pop-text">${t}</div>${e}<div class="slot-text">&nbsp;</div>
<div class="slot-text pop-text-today">${i}</div>${s}
</div>
</li>
`}get slotPop(){const t=this._config.entity_pop&&void 0!==this.hass.states[this._config.entity_pop]?null===this._config.entity_pop.match("^weather.")?Math.round(Number(this.hass.states[this._config.entity_pop].state)):void 0!==this.hass.states[this._config.entity_pop].attributes.forecast[0].precipitation_probability?Math.round(Number(this.hass.states[this._config.entity_pop].attributes.forecast[0].precipitation_probability)):"---":"---",e="---"!==t?R`<div class="slot-text unit">%</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-rainy"></ha-icon>
</div>
<div class="slot-text pop-text">${t}</div>${e}<div class="slot-text"></div>
</div>
</li>
`}get slotPos(){const t=this._config.entity_pos&&void 0!==this.hass.states[this._config.entity_pos]?null===this._config.entity_pos.match("^weather.")?this.hass.states[this._config.entity_pos].state:void 0!==this.hass.states[this._config.entity_pos].attributes.forecast[0].precipitation?this.hass.states[this._config.entity_pos].attributes.forecast[0].precipitation:"---":"---",e="---"!==t?R`<div class="slot-text unit">${this.getUOM("precipitation")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-rainy"></ha-icon>
</div>${this.localeTextPosToday}&nbsp;<div class="slot-text possible_today-text">${t}</div>${e}
</div>
</li>
`}get slotPossibleTomorrow(){const t=this._config.entity_possible_tomorrow&&void 0!==this.hass.states[this._config.entity_possible_tomorrow]?null===this._config.entity_possible_tomorrow.match("^weather.")?this.hass.states[this._config.entity_possible_tomorrow].state:void 0!==this.hass.states[this._config.entity_possible_tomorrow].attributes.forecast[1].precipitation?this.hass.states[this._config.entity_possible_tomorrow].attributes.forecast[1].precipitation:"---":"---",e="---"!==t?R`<div class="slot-text unit">${this.getUOM("precipitation")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-rainy"></ha-icon>
</div>${this.localeTextPosTomorrow}&nbsp;<div class="slot-text possible_tomorrow-text">${t}</div>${e}
</div>
</li>
`}get slotRainfall(){const t=this.currentRainfall,e="---"!==t?R`<div class="slot-text unit"></span>${this.getUOM("precipitation")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-rainy"></ha-icon>
</div>
<div class="slot-text rainfall-text">${t}</div>${e}
</div>
</li>
`}get slotHumidity(){const t=this.currentHumidity,e="---"!==t?R`<div class="slot-text unit">%</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:water-percent"></ha-icon>
</div>
<div class="slot-text humidity-text">${t}</div>${e}
</div>
</li>`}get slotPressure(){const t="---"!==this.currentPressure?R`<div class="slot-text unit">${this._config.pressure_units?this._config.pressure_units:this.getUOM("air_pressure")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:gauge"></ha-icon>
</div>
<div class="slot-text pressure-text">${this.currentPressure}</div>${t}
</div>
</li>
`}get slotObservedMax(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_observed_max&&void 0!==this.hass.states[this._config.entity_observed_max]?Number(this.hass.states[this._config.entity_observed_max].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",i="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-high"></ha-icon>
</div>
<div class="slot-text">${this.localeTextObservedMax}&nbsp;</div>
<div class="slot-text observed-max-text">${e}</div>${i}
</div>
</li>
`}get slotObservedMin(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_observed_min&&void 0!==this.hass.states[this._config.entity_observed_min]?Number(this.hass.states[this._config.entity_observed_min].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",i="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-low"></ha-icon>
</div>
<div class="slot-text">${this.localeTextObservedMin}&nbsp;</div>
<div class="slot-text observed-min-text">${e}</div>${i}
</div>
</li>
`}get slotForecastMax(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_forecast_max&&void 0!==this.hass.states[this._config.entity_forecast_max]?null===this._config.entity_forecast_max.match("^weather.")?Number(this.hass.states[this._config.entity_forecast_max].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):void 0!==this.hass.states[this._config.entity_forecast_max].attributes.forecast[0].temperature?Number(this.hass.states[this._config.entity_forecast_max].attributes.forecast[0].temperature).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---":"---",i="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-high"></ha-icon>
</div>
<div class="slot-text">${this.localeTextForecastMax}&nbsp;</div>
<div class="slot-text forecast-max-text">${e}</div>${i}
</div>
</li>
`}get slotForecastMin(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_forecast_min&&void 0!==this.hass.states[this._config.entity_forecast_min]?null===this._config.entity_forecast_min.match("^weather.")?Number(this.hass.states[this._config.entity_forecast_min].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):void 0!==this.hass.states[this._config.entity_forecast_min].attributes.forecast[0].templow?Number(this.hass.states[this._config.entity_forecast_min].attributes.forecast[0].templow).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---":"---",i="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-low"></ha-icon>
</div>
<div class="slot-text">${this.localeTextForecastMin}&nbsp;</div>
<div class="slot-text forecast-min-text">${e}</div>${i}
</div>
</li>
`}get slotTempNext(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_temp_next_label&&void 0!==this.hass.states[this._config.entity_temp_next_label]?this.hass.states[this._config.entity_temp_next_label].state.toLowerCase().includes("min")||this.hass.states[this._config.entity_temp_next_label].state.toLowerCase().includes("low")?"mdi:thermometer-low":"mdi:thermometer-high":"mdi:help-box",i=this._config.entity_temp_next&&void 0!==this.hass.states[this._config.entity_temp_next]?Number(this.hass.states[this._config.entity_temp_next].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",s=this._config.entity_temp_next_label&&void 0!==this.hass.states[this._config.entity_temp_next_label]?this.hass.states[this._config.entity_temp_next_label].state:"",o="---"!==i?R`<div class="slot-text unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="${e}"></ha-icon>
</div>
<div class="slot-text temp-next-text">${s} ${i}</div>
${o}
</div>
</li>
`}get slotTempFollowing(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_temp_following_label&&void 0!==this.hass.states[this._config.entity_temp_following_label]?this.hass.states[this._config.entity_temp_following_label].state.toLowerCase().includes("min")||this.hass.states[this._config.entity_temp_following_label].state.toLowerCase().includes("low")?"mdi:thermometer-low":"mdi:thermometer-high":"mdi:help-box",i=this._config.entity_temp_following&&void 0!==this.hass.states[this._config.entity_temp_following]?Number(this.hass.states[this._config.entity_temp_following].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",s=this._config.entity_temp_following_label&&void 0!==this.hass.states[this._config.entity_temp_following_label]?this.hass.states[this._config.entity_temp_following_label].state:"",o="---"!==i?R`<div class="slot-text unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="${e}"></ha-icon>
</div>
<div class="slot-text temp-following-text">${s} ${i}</div>
${o}
</div>
</li>
`}get slotTempMaximums(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_observed_max&&void 0!==this.hass.states[this._config.entity_observed_max]?Number(this.hass.states[this._config.entity_observed_max].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",i=this._config.entity_forecast_max&&void 0!==this.hass.states[this._config.entity_forecast_max]?Number(this.hass.states[this._config.entity_forecast_max].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",s="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-high"></ha-icon>
</div>
<div class="slot-text">${this.localeTextObsMax}&nbsp;</div>
<div class="slot-text observed-max-text">${e}</div>${s}
<div class="slot-text">&nbsp;(${this.localeTextFore}&nbsp;</div>
<div class="slot-text forecast-max-text">${i}</div>${s}
<div class="slot-text">)</div>
</div>
</li>
`}get slotTempMinimums(){const t=!0===this._config.option_today_temperature_decimals?1:0,e=this._config.entity_observed_min&&void 0!==this.hass.states[this._config.entity_observed_min]?Number(this.hass.states[this._config.entity_observed_min].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",i=this._config.entity_forecast_min&&void 0!==this.hass.states[this._config.entity_forecast_min]?Number(this.hass.states[this._config.entity_forecast_min].state).toLocaleString(this.locale,{minimumFractionDigits:t,maximumFractionDigits:t}):"---",s="---"!==e?R`<div class="unit-temp-small">${this.getUOM("temperature")}</div>`:R``;return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:thermometer-low"></ha-icon>
</div>
<div class="slot-text">${this.localeTextObsMin}&nbsp;</div>
<div class="slot-text observed-min-text">${e}</div>${s}
<div class="slot-text">&nbsp;(${this.localeTextFore}&nbsp;</div>
<div class="slot-text forecast-min-text">${i}</div>${s}
<div class="slot-text">)</div>
</div>
</li>
`}get slotUvSummary(){const t=this._config.entity_uv_alert_summary&&void 0!==this.hass.states[this._config.entity_uv_alert_summary]?"unknown"!==this.hass.states[this._config.entity_uv_alert_summary].state?this.hass.states[this._config.entity_uv_alert_summary].state:"Not Applicable":"---";return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-sunny"></ha-icon>
</div>
<div class="slot-text daytime-uv-text">${this.localeTextUVRating} ${t}</div>
</div>
</li>
`}get slotFireDanger(){const t=this._config.entity_fire_danger,e=t&&void 0!==this.hass.states[t]?"unknown"!==this.hass.states[t].state?!1===this._config.option_color_fire_danger?this.hass.states[t].state:this.hass.states[t].state.toLocaleUpperCase():"Not Applicable":"---";var i=t&&!1!==this._config.option_color_fire_danger&&this.hass.states[t].attributes.color_fill?`background-color:${this.hass.states[t].attributes.color_fill}; color:${this.hass.states[t].attributes.color_text};`:"";return!1===this._config.option_color_fire_danger?R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:fire"></ha-icon>
</div>
<div class="slot-text fire-danger-text" style="${i}">${e} </div>
</div>
</li>`:(""===i&&(i="font-weight:300; padding-left:0px;"),R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:fire"></ha-icon>
</div>
<div class="slot-text fire-danger-text">
<p class="fire-danger-text-color" style="${i}">${e}</p>
</div>
</div>
</li>`)}get slotWind(){const t=this._config.entity_wind_speed&&this._config.option_show_beaufort?R`<div class="slot-text"></div>BFT: ${this.currentBeaufort} -&nbsp;</div>`:"",e=this._config.entity_wind_bearing?R`<div class="slot-text">${this.currentWindBearing}&nbsp;</div>`:"",i=R`<div class="slot-text unit">${this.getUOM("length")}/h</div>`,s=this._config.entity_wind_speed?R`<div class="slot-text">${this.currentWindSpeed}</div>${i}&nbsp;`:"",o=this._config.entity_wind_gust?R`<div class="slot-text">(Gust ${this.currentWindGust}</div>${i})`:"";return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-windy"></ha-icon>
</div>
${t}${e}${s}${o}
</div>
</li>
`}get slotWindKt(){const t=this._config.entity_wind_speed_kt&&this._config.option_show_beaufort?R`<div class="slot-text"></div>BFT: ${this.currentBeaufortKt} -&nbsp;</div>`:"",e=this._config.entity_wind_bearing?R`<div class="slot-text">${this.currentWindBearing}&nbsp;</div>`:"",i=R`<div class="slot-text unit">Kt</div>`,s=this._config.entity_wind_speed_kt?R`<div class="slot-text">${this.currentWindSpeedKt}</div>${i}&nbsp;`:"",o=this._config.entity_wind_gust_kt?R`<div class="slot-text">(Gust ${this.currentWindGustKt}</div>${i})`:"";return R`
<li>
<div class="slot">
<div class="slot-icon">
<ha-icon icon="mdi:weather-windy"></ha-icon>
</div>
${t}${e}${s}${o}
</div>
</li>
`}get slotVisibility(){const t=this.currentVisibility,e="---"!==t?this.getUOM("length"):"";return R`
<li>
<div class="slot-icon">
<ha-icon icon="mdi:weather-fog"></ha-icon>
</div>
<div class="slot-text visibility-text">${t}</div>
<div class="slot-text unit"> ${e}
</div>
</li>
`}get slotSunNext(){return this._config.entity_sun?this.sunSet.next:R``}get slotSunFollowing(){return this._config.entity_sun?this.sunSet.following:R``}get slotCustom1(){var t=this._config.custom1_icon?this._config.custom1_icon:"mdi:help-box",e=this._config.custom1_value&&void 0!==this.hass.states[this._config.custom1_value]?this.hass.states[this._config.custom1_value].state:"unknown",i=this._config.custom1_units?this._config.custom1_units:"";return R`
<li>
<div class="slot-icon">
<ha-icon icon=${t}></ha-icon>
</div>
<div class="slot-text custom-1-text">${e}</div><div class="slot-text unit">${i}</div>
</li>
`}get slotCustom2(){var t=this._config.custom2_icon?this._config.custom2_icon:"mdi:help-box",e=this._config.custom2_value&&void 0!==this.hass.states[this._config.custom2_value]?this.hass.states[this._config.custom2_value].state:"unknown",i=this._config.custom2_units?this._config.custom2_units:"";return R`
<li>
<div class="slot-icon">
<ha-icon icon=${t}></ha-icon>
</div>
<div class="slot-text custom-2-text">${e}</div><div class="slot-text unit">${i}</div>
</li>
`}get slotCustom3(){var t=this._config.custom3_icon?this._config.custom3_icon:"mdi:help-box",e=this._config.custom3_value&&void 0!==this.hass.states[this._config.custom3_value]?this.hass.states[this._config.custom3_value].state:"unknown",i=this._config.custom3_units?this._config.custom3_units:"";return R`
<li>
<div class="slot-icon">
<ha-icon icon=${t}></ha-icon>
</div>
<div class="slot-text custom-3-text">${e}</div><div class="slot-text unit">${i}</div>
</li>
`}get slotCustom4(){var t=this._config.custom4_icon?this._config.custom4_icon:"mdi:help-box",e=this._config.custom4_value&&void 0!==this.hass.states[this._config.custom4_value]?this.hass.states[this._config.custom4_value].state:"unknown",i=this._config.custom4_units?this._config.custom4_units:"";return R`
<li>
<div class="slot-icon">
<ha-icon icon=${t}></ha-icon>
</div>
<div class="slot-text custom-4-text">${e}</div><div class="slot-text unit">${i}</div>
</li>
`}get forecastIcon(){const t=this._config.entity_forecast_icon;return t&&this.hass.states[t]?this.hass.states[t].state:"---"}get currentTemperature(){const t=this._config.entity_temperature,e=!0===this._config.option_show_overview_decimals?1:0;return t&&this.hass.states[t]?null===t.match("^weather.")?Number(this.hass.states[t].state).toLocaleString(this.locale,{minimumFractionDigits:e,maximumFractionDigits:e}):void 0!==this.hass.states[t].attributes.temperature?Number(this.hass.states[t].attributes.temperature).toLocaleString(this.locale,{minimumFractionDigits:e,maximumFractionDigits:e}):"---":"---"}get currentApparentTemperature(){const t=this._config.entity_apparent_temp,e=!0===this._config.option_show_overview_decimals?1:0;return t&&this.hass.states[t]?Number(this.hass.states[t].state).toLocaleString(this.locale,{minimumFractionDigits:e,maximumFractionDigits:e}):""}get currentHumidity(){const t=this._config.entity_humidity;return t&&this.hass.states[t]?null===t.match("^weather.")?Number(this.hass.states[t].state).toLocaleString(this.locale):void 0!==this.hass.states[t].attributes.humidity?Number(this.hass.states[t].attributes.humidity).toLocaleString(this.locale):"---":"---"}get currentRainfall(){const t=this._config.entity_rainfall,e=!0===this._config.option_today_rainfall_decimals?1:0;return t&&this.hass.states[t]?Number(this.hass.states[t].state).toLocaleString(this.locale,{minimumFractionDigits:e,maximumFractionDigits:e}):"---"}get currentPressure(){const t=this._config.entity_pressure;var e=this._config.option_pressure_decimals?Math.max(Math.min(this._config.option_pressure_decimals,3),0):0;return t&&this.hass.states[t]?null===t.match("^weather.")?Number(this.hass.states[t].state).toLocaleString(this.locale,{minimumFractionDigits:e,maximumFractionDigits:e}):void 0!==this.hass.states[t].attributes.pressure?Number(this.hass.states[t].attributes.pressure).toLocaleString(this.locale):"---":"---"}get currentVisibility(){const t=this._config.entity_visibility;return t&&this.hass.states[t]?null===t.match("^weather.")?Number(this.hass.states[t].state).toLocaleString(this.locale):void 0!==this.hass.states[t].attributes.visibility?Number(this.hass.states[t].attributes.visibility).toLocaleString(this.locale):"---":"---"}get currentWindBearing(){const t=this._config.entity_wind_bearing;return t&&this.hass.states[t]?null===t.match("^weather.")?isNaN(Number(this.hass.states[t].state))?this.hass.states[t].state:this.windDirections[Math.round(Number(this.hass.states[t].state)/360*16)]:void 0!==this.hass.states[t].attributes.wind_bearing?isNaN(Number(this.hass.states[t].attributes.wind_bearing))?this.hass.states[t].attributes.wind_bearing:this.windDirections[Math.round(Number(this.hass.states[t].attributes.wind_bearing)/360*16)]:"---":"---"}get currentWindSpeed(){const t=this._config.entity_wind_speed;return t&&this.hass.states[t]?null===t.match("^weather.")?Math.round(Number(this.hass.states[t].state)).toLocaleString(this.locale):void 0!==this.hass.states[t].attributes.wind_speed?Math.round(Number(this.hass.states[t].attributes.wind_speed)).toLocaleString(this.locale):"---":"---"}get currentWindGust(){const t=this._config.entity_wind_gust;return t&&this.hass.states[t]?Math.round(Number(this.hass.states[t].state)).toLocaleString(this.locale):"---"}get currentWindSpeedKt(){const t=this._config.entity_wind_speed_kt;return t&&this.hass.states[t]?null===t.match("^weather.")?Math.round(Number(this.hass.states[t].state)).toLocaleString(this.locale):void 0!==this.hass.states[t].attributes.wind_speed?Math.round(Number(this.hass.states[t].attributes.wind_speed)).toLocaleString(this.locale):"---":"---"}get currentWindGustKt(){const t=this._config.entity_wind_gust_kt;return t&&this.hass.states[t]?Math.round(Number(this.hass.states[t].state)).toLocaleString(this.locale):"---"}get windDirections(){const t=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW","N"],e=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSO","SO","OSO","O","ONO","NO","NNO","N"],i=["N","NNO","NO","ONO","O","OSO","SO","SSO","S","SSW","SW","WSW","W","WNW","NW","NNW","N"],s=["N","NNO","NO","ONO","O","OZO","ZO","ZZO","Z","ZZW","ZW","WZW","W","WNW","NW","NNW","N"],o=["צפון","צ-צ-מז","צפון מזרח","מז-צ-מז","מזרח","מז-ד-מז","דרום מזרח","ד-ד-מז","דרום","ד-ד-מע","דרום מערב","מע-ד-מע","מערב","מע-צ-מע","צפון מערב","צ-צ-מע","צפון"],n=["N","NNØ","NØ","ØNØ","Ø","ØSØ","SØ","SSØ","S","SSV","SV","VSV","V","VNV","NV","NNV","N"],r=["С","ССВ","СВ","ВСВ","В","ВЮВ","ЮВ","ЮЮВ","Ю","ЮЮЗ","ЮЗ","ЗЮЗ","З","ЗСЗ","СЗ","ССЗ","С"],a=["С","ССИ","СИ","ИСИ","И","ИЮИ","ЮИ","ЮЮИ","Ю","ЮЮЗ","ЮЗ","ЗЮЗ","З","ЗСЗ","СЗ","ССЗ","С"];switch(this.locale){case"it":case"fr":return e;case"de":return i;case"nl":return s;case"he":return o;case"ru":return r;case"da":return n;case"bg":return a;default:r Line truncated
<li>
<div class="slot-icon">
<ha-icon id="sun-next-icon" icon="mdi:weather-sunset-down"></ha-icon>
</div>
<div class="slot-text sun-next-text">${t}</div>
</li>`,following:R`
<li>
<div class="slot-icon">
<ha-icon id="sun-following-icon" icon="mdi:weather-sunset-up"></ha-icon>
</div>
<div class="slot-text sun-following-text">${e}</div>
</li>`,nextText:t,followingText:e,nextIcon:"mdi:weather-sunset-down",followingIcon:"mdi:weather-sunset-up"}):((new Date).getDate()!=new Date(this.hass.states[this._config.entity_sun].attributes.next_rising).getDate()&&(e=i.toLocaleDateString(this.locale,{weekday:"short"})+" "+e,t=i.toLocaleDateString(this.locale,{weekday:"short"})+" "+t),{next:R`
<li>
<div class="slot-icon">
<ha-icon id="sun-next-icon" icon="mdi:weather-sunset-up"></ha-icon>
</div>
<div class="slot-text sun-next-text">${e}</div>
</li>`,following:R`
<li>
<div class="slot-icon">
<ha-icon id="sun-following-icon" icon="mdi:weather-sunset-down"></ha-icon>
</div>
<div class="slot-text sun-following-text">${t}</div>
</li>`,nextText:e,followingText:t,nextIcon:"mdi:weather-sunset-up",followingIcon:"mdi:weather-sunset-down"}):{next:R``,following:R``,nextText:"",followingText:"",nextIcon:"",followingIcon:""}}get timeFormat(){return this._config.option_time_format?this._config.option_time_format:"system"}_weatherIcon(t){switch(t){case"sunny":case"clear":return this.iconClear;case"mostly-sunny":case"mostly_sunny":return this.iconMostlySunny;case"partly-cloudy":case"partly_cloudy":case"partlycloudy":return this.iconPartlyCloudy;case"cloudy":return this.iconCloudy;case"hazy":case"hazey":case"haze":return this.iconHazy;case"frost":return this.iconFrost;case"light-rain":case"light_rain":return this.iconLightRain;case"wind":case"windy":return this.iconWindy;case"fog":case"foggy":return this.iconFog;case"showers":case"shower":return this.iconShowers;case"rain":case"rainy":return this.iconRain;case"dust":case"dusty":return this.iconDust;case"snow":case"snowy":return this.iconSnow;case"snowy-rainy":case"snowy_rainy":case"snowyrainy":return this.iconSnowRain;case"storm":case"stormy":return this.iconStorm;case"light-showers":case"light-shower":case"light_showers":case"light_shower":return this.iconLightShowers;case"heavy-showers":case"heavy-shower":case"heavy_showers":case"heavy_shower":case"pouring":return this.iconHeavyShowers;case"tropical-cyclone":case"tropical_cyclone":case"tropicalcyclone":return this.iconCyclone;case"clear-day":case"clear_day":return this.iconClearDay;case"clear-night":case"clear_night":return this.iconClearNight;case"sleet":return this.iconSleet;case"partly-cloudy-day":case"partly_cloudy_day":return this.iconPartlyCloudyDay;case"partly-cloudy-night":case"partly_cloudy_night":return this.iconPartlyCloudyNight;case"hail":return this.iconHail;case"lightning":case"lightning-rainy":case"lightning_rainy":case"thunderstorm":return this.iconLightning;case"windy-variant":case"windy_variant":return this.iconWindyVariant}return"unknown"}get dayOrNight(){return this._config.entity_sun&&void 0!==this.hass.states[this._config.entity_sun]?{below_horizon:"night",above_horizon:"day"}[this.hass.states[this._config.entity_sun].state]:"day"}get iconClear(){return`clear-${this.dayOrNight}`}get iconMostlySunny(){return`cloudy-1-${this.dayOrNight}`}get iconPartlyCloudy(){return`cloudy-2-${this.dayOrNight}`}get iconCloudy(){return"cloudy"}get iconHazy(){return`haze-${this.dayOrNight}`}get iconFrost(){return`frost-${this.dayOrNight}`}get iconLightRain(){return"rainy-2"}get iconWindy(){return"wind"}get iconFog(){return`fog-${this.dayOrNight}`}get iconShowers(){return`rainy-1-${this.dayOrNight}`}get iconRain(){return"rainy-3"}get iconDust(){return"dust"}get iconSnow(){return"snowy-3"}get iconSnowRain(){return"snow-and-sleet-mix"}get iconStorm(){return`scattered-thunderstorms-${this.dayOrNight}`}get iconLightShowers(){return`rainy-1-${this.dayOrNight}`}get iconHeavyShowers(){return`rainy-2-${this.dayOrNight}`}get iconCyclone(){return"tropical-storm"}get iconClearDay(){return"clear-day"}get iconClearNight(){return"clear-night"}get iconSleet(){return"rain-and-sleet-mix"}get iconPartlyCloudyDay(){return"cloudy-1-day"}get iconPartlyCloudyNight(){return"cloudy-1-night"}get iconHail(){return"hail"}get iconLightning(){return`isolated-thunderstorms-${this.dayOrNight}`}get iconWindyVariant(){return"wind"}get locale(){try{return Intl.NumberFormat(this._config.option_locale),this._config.option_locale}catch(t){return}}get localeTextFeelsLike(){switch(this.locale){case"it":return"Percepito";case"fr":return"Ressenti";case"de":return"Gefühlt";case"nl":return"Voelt als";case"pl":return"Odczuwalne";case"he":return"מרגיש כמו";case"da":return"Føles som";case"ru":return"Ощущается как";case"ua":return"Відчувається як";case"bg":return"Усеща се като";default:return"Feels like"}}get localeTextObservedMax(){return this.locale,"Observed Max"}get localeTextObservedMin(){return this.locale,"Observed Min"}get localeTextObsMax(){return this.locale,"Obs Max"}get localeTextObsMin(){return this.locale,"Obs Min"}get localeTextForecastMax(){switch(this.locale){case"it":return"Max oggi";case"fr":return"Max aujourd'hui";case"de":return"Max heute";case"nl":return"Max vandaag";case"pl":return"Maks Temperatura";case"he":return"מקסימלי היום";case"da":return"Højeste i dag";case"ru":return"Макс сегодня";case"ua":return"Макс сьогодні";case"bg":return"Макс днес";default:return"Forecast Max"}}get localeTextForecastMin(){switch(this.locale){case"it":return"Min oggi";case"fr":return"Min aujourd'hui";case"de":return"Min heute";case"nl":return"Min vandaag";case"pl":return"Min Temperatura";case"he":return"דקות היום";case"da":return"Laveste i dag";case"ru":return"Мин сегодня";case"ua":return"Мін сьогодні";case"bg":return"Мин днес";default:return"Forecast Min"}}get localeTextPosToday(){switch(this.locale){case"it":return"Previsione";case"fr":return"PrLine truncated
<hui-warning>
<div>Weather Card</div>
${t.map((t=>R`<div>${t}</div>`))}
</hui-warning>
`}_showWarning(t){return R`<hui-warning>${t}</hui-warning>`}_showError(t){const e=document.createElement("hui-error-card");return e.setConfig({type:"error",error:t,origConfig:this._config}),R`${e}`}get styles(){const t=this._config.option_tooltips?"visible":"hidden",e=this._config.temp_font_weight||"300",i=this._config.temp_font_size||"4em",s=this._config.forecast_text_font_size||"21px",o=this._config.forecast_text_alignment||"center";return nt`
.card {
padding: 8px 16px 8px 16px;
}
.content {
align-items: center;
}
.card-header {
font-size: 1.5em;
color: var(--primary-text-color);
}
.section {
margin: -1px;
border: 1px solid transparent;
padding-top: 8px;
padding-bottom: 8px;
}
.updated {
font-size: 0.9em;
font-weight: 300;
color: var(--primary-text-color);
}
.overview-top {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.stacked {
position: absolute;
}
.top-left {
display: flex;
flex-direction: column;
height: 120px;
}
.top-left-obs {
display: flex;
flex-direction: column;
}
.big-icon {
height: 120px;
width: 140px;
position: relative;
}
.unknown-forecast {
position: relative;
top: -30px;
text-align: center;
}
.currentTemps {
display: flex;
align-self: flex-start;
flex-direction: column;
height: 60px;
}
.current-temp {
display: table-row;
margin-left: auto;
padding: 2px 0px;
}
.temp {
display:table-cell;
font-weight: ${ot(e)};
font-size: ${ot(i)};
color: var(--primary-text-color);
position: relative;
line-height: 74%;
}
.unit-temp-big {
display: table-cell;
vertical-align: top;
font-weight: ${ot(e)};
font-size: 1.5em;
color: var(--primary-text-color);
position: relative;
line-height: 74%;
}
.apparent-temp {
display: table-row;
margin-left: auto;
height: 24px;
}
.apparent {
display: table-cell;
color: var(--primary-text-color);
font-weight: 300;
position: relative;
line-height: 24px;
}
.unit-temp-small {
display: table-cell;
vertical-align: top;
font-size: 10.5px;
color: var(--primary-text-color);
position: relative;
line-height: 14px;
padding-top: 3.6px;
padding-left: 1px;
}
.line {
margin-top : 7px;
margin-bottom: -9px;
color: var(--primary-text-color);
}
.forecast-text {
font-size: ${ot(s)};
text-align: ${ot(o)};
line-height: 25px;
}
.forecast-text-right {
font-size: ${ot(s)};
text-align: ${ot(o)};
width: 100%;
align-items: center;
display: flex;
justify-content: center;
line-height: 25px;
margin-left: -40px;
}
.variations {
display: flex;
flex-flow: row wrap;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-block-start: 0px;
margin-block-end: 0px;
padding-inline-start: 8px;
}
.slot-list-item-1 {
min-width:50%;
padding-right: 8px;
}
.slot-list {
list-style: none;
padding: 0;
}
.slot-list li {
height:24px;
}
.variations-ugly {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-block-start: 0px;
margin-block-end: 0px;
padding-inline-start: 8px;
}
.ha-icon {
height: 24px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.unit {
font-size: 0.8em;
display: table-cell;
padding-left: 1px;
}
.slot {
display: table-row;
}
.slot-icon {
display: table-cell;
position: relative;
height: 18px;
padding-right: 5px;
color: var(--paper-item-icon-color);
}
.slot-text {
display: table-cell;
position: relative;
}
.fire-danger-text-color {
display: inline-block;
height: 18px;
line-height: 20px;
text-align: left;
vertical-align: middle;
margin: 0;
padding-left: 4px;
font-weight: 600;
width: 108px;
}
.daily-forecast-horiz-section {
display: flex;
flex-flow: row wrap;
width: 100%;
margin: 0;
clear: both;
}
.daily-forecast-horiz-section .day-horiz:nth-last-child(1) {
border-right: transparent;
}
.day-horiz {
flex: 1;
float: left;
text-align: center;
color: var(--primary-text-color);
border-right: 1px solid #d9d9d9;
margin-right: -1px;
box-sizing: border-box;
}
.daily-forecast-vert-section {
display: flex;
flex-flow: column nowrap;
margin: 0 auto;
clear: both;
}
.day-vert {
flex: 1;
color: var(--primary-text-color);
border-top: 1px solid #d9d9d9;
line-height: 24px;
box-sizing: border-box;
padding-bottom: 8px;
}
.day-vert-top {
display: flex;
width: 100%;
}
.day-vert-middle {
display: flex;
float: left;
width: 100%;
}
.day-vert-bottom {
text-align: left;
float: left;
}
.day-vert-dayicon {
width: 40px;
text-align: left;
float: left;
margin-bottom: -8px;
}
.day-vert-temps {
flex: 1;
text-align: left;
float: left;
padding-left: 1em;
padding-top: 0.5em;
}
.day-vert-rain {
flex: 2;
text-align: left;
float: left;
padding-left: 1em;
padding-top: 0.5em;
}
.dayname {
text-transform: uppercase;
}
.dayname-vert {
min-width: 40px;
max-width: 40px;
text-transform: uppercase;
}
.icon {
width: 49px;
height: 42px;
margin: auto;
display: inline-block;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
}
.f-slot-horiz {
display: inline-block;
text-align: center;
list-style: none;
overflow: hidden;
font-weight: 300;
padding: 0;
margin-block-start: 0;
margin-block-end: -12px;
}
.f-slot-horiz-text {
height:20px;
}
.f-slot-horiz-icon {
height:50px;
}
.f-summary-vert {
padding-left: 1em;
font-weight: 400;
}
.f-firedanger-vert {
text-align: right;
font-weight: 300;
margin-top: -24px;
}
.f-slot-vert {
display: table;
overflow: hidden;
height: 24px;
font-weight: 300;
}
.f-slot-minmax {
width: 100%;
}
.f-extended {
display: inline-table;
font-size: 13px;
font-weight: 300;
padding-top: 8px;
line-height:20px;
}
.extended-section .f-extended {
padding-top: 0;
}
.highTemp {
display: table-cell;
font-weight: bold;
}
.lowTemp {
display: table-cell;
font-weight: 300;
}
.slash {
padding-left: 2px;
padding-right: 2px;
}
.high-temp {
display: table-cell;
font-weight: bold;
width: 21px;
text-align: right;
}
.low-temp {
display: table-cell;
font-weight: 300;
width: 21px;
text-align: right;
}
.temp-label {
display: table-cell;
width: 32px;
font-weight: 300;
}
.f-label {
display: table-cell;
white-space: nowrap;
padding-right: 0.2em;
}
.pop {
display: table-cell;
font-weight: 300;
color: var(--primary-text-color);
}
.pos {
display: table-cell;
font-weight: 300;
color: var(--primary-text-color);
white-space: nowrap;
}
.fcasttooltip {
position: relative;
display: inline-block;
}
.fcasttooltip .fcasttooltipblock {
visibility: hidden;
background-color: #4B9BEF;
color: #FFFFFF;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: #FFA100;
border-width: 1px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 107%;
margin-left: -2px;
}
.fcasttooltip:hover .fcasttooltipblock {
visibility: ${ot(t)};
}
.fcasttooltiptext {
padding-left: 8px;
padding-right: 8px;
}
`}};s([wt({attribute:!1})],ge.prototype,"hass",void 0),s([xt()],ge.prototype,"_config",void 0),s([xt()],ge.prototype,"_cardWidth",void 0),ge=s([yt("platinum-weather-card")],ge);export{ge as P,e as _,i as a,s as b,le as c,W as d,wt as e,xt as f,o as g,yt as h,he as i,Ot as l,Pt as n,$t as o,nt as r,vt as s,ce as t,z as x,R as y};
@@ -0,0 +1 @@
export{P as PlatinumWeatherCard}from"./platinum-weather-card-df6d26e2.js";
@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.34167" y="-.34167" width="1.6833" height="1.85">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g id="day" transform="translate(16,14)" filter="url(#blur)">
<g class="am-weather-sun">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.3038" y="-.3318" width="1.6076" height="1.894">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-1">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-1">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-2">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g id="cloudy" transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-1">
<path transform="matrix(.6 0 0 .6 -10 -8)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.27097" width="1.4937" height="1.6939">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16 -2)" filter="url(#blur)">
<g class="am-weather-wind" transform="translate(-16,10)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<path d="M25.5 5A4 4 0 1 1 29 11H10">
</path>
<path d="M39.5 11A4 4 0 1 1 43 17H6">
</path>
<path d="M28.5 29A4 4 0 1 0 32 23H15">
</path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 933 B

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
<g stroke="#57a0ee" transform="translate(-16,4)" fill="none" stroke-width="2" stroke-linecap="round">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
<path stroke="#57a0ee"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g stroke="#57a0ee" transform="translate(-16,4)" fill="none" stroke-width="2" stroke-linecap="round">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
<path stroke="#57a0ee"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g stroke="#57a0ee" transform="translate(-16,4)" fill="none" stroke-width="2" stroke-linecap="round">
<path d="M11,32H45" />
<path d="M15.5,37H40.5" />
<path d="M22.5,42H33.5" />
<path stroke="#57a0ee"
d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="0.1, 7"
stroke-linecap="round" stroke-width="3">
<line class="am-weather-rain-1" transform="translate(-5,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
<line class="am-weather-rain-1" transform="translate(5)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
</g>
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffc04a"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffc04a" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-haze" transform="translate(-10,20)" fill="none" stroke="#cd9e73" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-haze-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
<line class="am-weather-haze-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
<line class="am-weather-haze-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
<line class="am-weather-haze-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Hurricane | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.16995" y="-.17864" width="1.3289" height="1.455">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16 -2)" filter="url(#blur)">
<g transform="translate(0,10)" fill="#c00" fill-rule="nonzero">
<path
d="m18.478 0.091701c0.04503-0.0026866 0.44719-0.0026866 0.89312-0.0013433 0.81178 0.0039403 1.0316 0.013164 1.6236 0.066 0.71569 0.064746 1.4989 0.18233 2.2033 0.33152 0.32351 0.068687 0.76189 0.17167 0.77186 0.18224 0.0025 0.001343-0.10742 0.00797-0.24234 0.013254-1.6374 0.059463-3.2012 0.47409-4.3191 1.1438-0.89052 0.53221-1.5562 1.2428-1.9509 2.0802-0.18364 0.38696-0.25232 0.67487-0.2373 0.98919 0.01995 0.44901 0.19362 0.83731 0.72063 1.6127 0.30733 0.4517 0.52458 0.7911 0.67703 1.0565 0.60575 1.0553 0.91551 2.1053 1.0117 3.434 0.02247 0.31433 0.0187 1.1662-0.0076 1.5056-0.08611 1.1412-0.24854 2.0023-0.53825 2.866-0.77564 2.3139-2.3782 4.3241-4.6589 5.8443-1.2939 0.86382-2.8403 1.569-4.4715 2.0393-1.3089 0.37773-2.5905 0.59436-4.1155 0.69734-0.34849 0.02373-1.861 0.02373-2.2107 0-0.89182-0.05946-1.5563-0.13997-2.3357-0.28128-0.53079-0.09511-1.3039-0.27081-1.2914-0.29194 0.0036854-0.0053 0.098607-0.01057 0.21231-0.01057 0.55578 0 1.4564-0.11355 2.1021-0.26543 1.4526-0.34075 2.5604-0.91263 3.3573-1.7328 0.35721-0.36851 0.62328-0.74355 0.83434-1.1781 0.17366-0.35919 0.24234-0.59955 0.25231-0.88621 0.019955-0.5349-0.12863-0.88755-0.77942-1.8477-0.22733-0.33672-0.47209-0.71713-0.58202-0.906-0.61573-1.0553-0.93924-2.1237-1.0392-3.426-0.017438-0.23114-0.027416-0.84797-0.017438-1.1266 0.059955-1.7117 0.38589-3.1249 1.0354-4.4867 0.90427-1.8952 2.4443-3.5713 4.449-4.8418 2.0896-1.3247 4.6626-2.1938 7.3542-2.4817 0.42346-0.044866 0.68198-0.064746 1.299-0.097701z" />
</g>
<g class="warning" transform="translate(20,30)">
<path
d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
fill="#c00" />
<path d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
<circle cx="9.5" cy="13" r="1" fill="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-2">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-2">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Isolated Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-2">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#91c0f8" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Mix of Rain and Sleet | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-sleet-2" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8"
stroke-linecap="round">
<line class="am-weather-rain-1" transform="translate(-5,1)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2" />
<line class="am-weather-rain-1" transform="translate(5)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2" />
</g>
<g class="am-weather-rain-3" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-13,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(-3,0)" y2="8" />
<line class="am-weather-rain-2" transform="translate(7,-1)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Mix of Rain and Snow | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.2345" width="1.4937" height="1.5712">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-snow-1" transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
<line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
<line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
<line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
</g>
<g class="am-weather-rain-2" transform="rotate(10,-198.74,98.01)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 7" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-10,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(5,-1)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.24132" width="1.4937" height="1.5878">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-2" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-2" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.24132" width="1.4937" height="1.5878">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-2" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-3" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-3" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-rainy-3" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4" stroke-linecap="round"
stroke-width="2">
<line class="am-weather-rain-1" transform="translate(-4,1)" y2="8" />
<line class="am-weather-rain-2" transform="translate(0,-1)" y2="8" />
<line class="am-weather-rain-1" transform="translate(4)" y2="8" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-sun" transform="translate(0,16)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
<g transform="rotate(45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(135)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="scale(-1)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(225)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-90)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<g transform="rotate(-45)">
<line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
</g>
<circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g transform="matrix(.8 0 0 .8 16 4)">
<g class="am-weather-moon-star-1">
<polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
stroke-miterlimit="10" />
</g>
<g class="am-weather-moon-star-2">
<polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
fill="#ffa500" stroke-miterlimit="10" />
</g>
<g class="am-weather-moon">
<path
d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
</g>
</g>
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="0" dy="4" result="offsetblur" />
<feComponentTransfer>
<feFuncA slope="0.05" type="linear" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g transform="translate(16,-2)" filter="url(#blur)">
<g class="am-weather-cloud-3">
<path transform="translate(-20,-11)"
d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
</g>
<g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
<polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
fill="#ffa500" stroke="#fff" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Loaded 100 of 1114 files, more files were not shown because too many files have changed in this diff. Show more