dist/icons/animated1/LIGHT_SNOW.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40" viewbox="0 0 17 17">
<defs>
	<filter id="blur" width="200%" height="200%">
		<feComponentTransfer>
			<feFuncA type="linear" slope="0.05"/>
		</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(-2px,0px);
		-moz-transform: translate(-2px,0px);
		-ms-transform: translate(-2px,0px);
		transform: translate(-2px,0px);
	}
	50% {
		-webkit-transform: translate(1px,0px);
		-moz-transform: translate(1px,0px);
		-ms-transform: translate(1px,0px);
		transform: translate(1px,0px);
	}
	100% {
		-webkit-transform: translate(-2px,0px);
		-moz-transform: translate(-2px,0px);
		-ms-transform: translate(-2px,0px);
		transform: translate(-2px,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: 8s;
	-moz-animation-duration: 8s;
	animation-duration: 8s;
	-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;
}
/* EASING */
.am-weather-easing-ease-in-out {
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

/* 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 filter="url(#blur)" id="snowy-6">
		<g transform="translate(22,28), rotate(10)">
			<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8"/>
			<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8"/>
		</g>
		<g transform="translate(7,-8)">
			<g class="am-weather-cloud-2 am-weather-easing-ease-in-out">
				<path d="M47.7,35.4c0-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="#d4d4d4" transform="translate(-20,-11)"/>
			</g>
			<g class="am-weather-snow-1">
				<g transform="translate(3,28)">
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
				</g>
			</g>
s
			<g class="am-weather-snow-3">
				<g transform="translate(20,28)">
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
					<line fill="none" stroke="#b4cde8" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5"/>
				</g>
			</g>
		</g>
	</g>
</svg>