cloudy-night-2.svg 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- (c) ammap.com | SVG weather icons -->
  3. <svg
  4. version="1.1"
  5. xmlns="http://www.w3.org/2000/svg"
  6. xmlns:xlink="http://www.w3.org/1999/xlink"
  7. width="64"
  8. height="64"
  9. viewbox="0 0 64 64">
  10. <defs>
  11. <filter id="blur" width="200%" height="200%">
  12. <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  13. <feOffset dx="0" dy="4" result="offsetblur"/>
  14. <feComponentTransfer>
  15. <feFuncA type="linear" slope="0.05"/>
  16. </feComponentTransfer>
  17. <feMerge>
  18. <feMergeNode/>
  19. <feMergeNode in="SourceGraphic"/>
  20. </feMerge>
  21. </filter>
  22. <style type="text/css"><![CDATA[
  23. /*
  24. ** CLOUDS
  25. */
  26. @keyframes am-weather-cloud-2 {
  27. 0% {
  28. -webkit-transform: translate(0px,0px);
  29. -moz-transform: translate(0px,0px);
  30. -ms-transform: translate(0px,0px);
  31. transform: translate(0px,0px);
  32. }
  33. 50% {
  34. -webkit-transform: translate(2px,0px);
  35. -moz-transform: translate(2px,0px);
  36. -ms-transform: translate(2px,0px);
  37. transform: translate(2px,0px);
  38. }
  39. 100% {
  40. -webkit-transform: translate(0px,0px);
  41. -moz-transform: translate(0px,0px);
  42. -ms-transform: translate(0px,0px);
  43. transform: translate(0px,0px);
  44. }
  45. }
  46. .am-weather-cloud-2 {
  47. -webkit-animation-name: am-weather-cloud-2;
  48. -moz-animation-name: am-weather-cloud-2;
  49. animation-name: am-weather-cloud-2;
  50. -webkit-animation-duration: 3s;
  51. -moz-animation-duration: 3s;
  52. animation-duration: 3s;
  53. -webkit-animation-timing-function: linear;
  54. -moz-animation-timing-function: linear;
  55. animation-timing-function: linear;
  56. -webkit-animation-iteration-count: infinite;
  57. -moz-animation-iteration-count: infinite;
  58. animation-iteration-count: infinite;
  59. }
  60. /*
  61. ** MOON
  62. */
  63. @keyframes am-weather-moon {
  64. 0% {
  65. -webkit-transform: rotate(0deg);
  66. -moz-transform: rotate(0deg);
  67. -ms-transform: rotate(0deg);
  68. transform: rotate(0deg);
  69. }
  70. 50% {
  71. -webkit-transform: rotate(15deg);
  72. -moz-transform: rotate(15deg);
  73. -ms-transform: rotate(15deg);
  74. transform: rotate(15deg);
  75. }
  76. 100% {
  77. -webkit-transform: rotate(0deg);
  78. -moz-transform: rotate(0deg);
  79. -ms-transform: rotate(0deg);
  80. transform: rotate(0deg);
  81. }
  82. }
  83. .am-weather-moon {
  84. -webkit-animation-name: am-weather-moon;
  85. -moz-animation-name: am-weather-moon;
  86. -ms-animation-name: am-weather-moon;
  87. animation-name: am-weather-moon;
  88. -webkit-animation-duration: 6s;
  89. -moz-animation-duration: 6s;
  90. -ms-animation-duration: 6s;
  91. animation-duration: 6s;
  92. -webkit-animation-timing-function: linear;
  93. -moz-animation-timing-function: linear;
  94. -ms-animation-timing-function: linear;
  95. animation-timing-function: linear;
  96. -webkit-animation-iteration-count: infinite;
  97. -moz-animation-iteration-count: infinite;
  98. -ms-animation-iteration-count: infinite;
  99. animation-iteration-count: infinite;
  100. -webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
  101. -moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
  102. -ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
  103. transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
  104. }
  105. @keyframes am-weather-moon-star-1 {
  106. 0% {
  107. opacity: 0;
  108. }
  109. 100% {
  110. opacity: 1;
  111. }
  112. }
  113. .am-weather-moon-star-1 {
  114. -webkit-animation-name: am-weather-moon-star-1;
  115. -moz-animation-name: am-weather-moon-star-1;
  116. -ms-animation-name: am-weather-moon-star-1;
  117. animation-name: am-weather-moon-star-1;
  118. -webkit-animation-delay: 3s;
  119. -moz-animation-delay: 3s;
  120. -ms-animation-delay: 3s;
  121. animation-delay: 3s;
  122. -webkit-animation-duration: 5s;
  123. -moz-animation-duration: 5s;
  124. -ms-animation-duration: 5s;
  125. animation-duration: 5s;
  126. -webkit-animation-timing-function: linear;
  127. -moz-animation-timing-function: linear;
  128. -ms-animation-timing-function: linear;
  129. animation-timing-function: linear;
  130. -webkit-animation-iteration-count: 1;
  131. -moz-animation-iteration-count: 1;
  132. -ms-animation-iteration-count: 1;
  133. animation-iteration-count: 1;
  134. }
  135. @keyframes am-weather-moon-star-2 {
  136. 0% {
  137. opacity: 0;
  138. }
  139. 100% {
  140. opacity: 1;
  141. }
  142. }
  143. .am-weather-moon-star-2 {
  144. -webkit-animation-name: am-weather-moon-star-2;
  145. -moz-animation-name: am-weather-moon-star-2;
  146. -ms-animation-name: am-weather-moon-star-2;
  147. animation-name: am-weather-moon-star-2;
  148. -webkit-animation-delay: 5s;
  149. -moz-animation-delay: 5s;
  150. -ms-animation-delay: 5s;
  151. animation-delay: 5s;
  152. -webkit-animation-duration: 4s;
  153. -moz-animation-duration: 4s;
  154. -ms-animation-duration: 4s;
  155. animation-duration: 4s;
  156. -webkit-animation-timing-function: linear;
  157. -moz-animation-timing-function: linear;
  158. -ms-animation-timing-function: linear;
  159. animation-timing-function: linear;
  160. -webkit-animation-iteration-count: 1;
  161. -moz-animation-iteration-count: 1;
  162. -ms-animation-iteration-count: 1;
  163. animation-iteration-count: 1;
  164. }
  165. ]]></style>
  166. </defs>
  167. <g filter="url(#blur)" id="cloudy-night-2">
  168. <g transform="translate(20,10)">
  169. <g transform="translate(16,4), scale(0.8)">
  170. <g class="am-weather-moon-star-1">
  171. <polygon fill="orange" 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" stroke="none" stroke-miterlimit="10"/>
  172. </g>
  173. <g class="am-weather-moon-star-2">
  174. <polygon fill="orange" 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" stroke="none" stroke-miterlimit="10" transform="translate(20,10)"/>
  175. </g>
  176. <g class="am-weather-moon">
  177. <path d="M14.5,13.2c0-3.7,2-6.9,5-8.7 c-1.5-0.9-3.2-1.3-5-1.3c-5.5,0-10,4.5-10,10s4.5,10,10,10c1.8,0,3.5-0.5,5-1.3C16.5,20.2,14.5,16.9,14.5,13.2z" fill="orange" stroke="orange" stroke-linejoin="round" stroke-width="2"/>
  178. </g>
  179. </g>
  180. <g class="am-weather-cloud-2">
  181. <path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#91C0F8" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
  182. </g>
  183. </g>
  184. </g>
  185. </svg>