<div class="svg-contain">
<svg version="1.1" class="clear-sky-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72.3 52.6" style="enable-background:new 0 0 72.3 52.6;" xml:space="preserve">
<g>
<path class="sun" d="M50.8,25.7c0,7.9-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4S50.8,17.8,50.8,25.7z"/>
<path class="line big-path line-1" d="M54.5,25.8h6"/>
<path class="line big-path line-2" d="M12.4,25.8h6"/>
<path class="line big-path line-3" d="M36.5,44.3v6"/>
<path class="line big-path line-4" d="M36.5,8.2v-6"/>
<path class="line big-path line-5" d="M23,38.8l-4.8,4.8"/>
<path class="line big-path line-6" d="M54.9,8.9L50,13.8"/>
<path class="line big-path line-7" d="M50,38.8l4.4,4.4"/>
<path class="line big-path line-8" d="M18.8,9.6l4.2,4.2"/>
</g>
</svg>
</div>
@keyframes expand {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.svg-contain {
width: 150px;
height: 110px;
}
.clear-sky-svg {
animation: expand 0.8s alternate-reverse infinite;
}
.clear-sky-svg .sun {
fill: #fff;
}
.clear-sky-svg .line {
stroke: #fff;
stroke-dasharray: 7;
animation: dash 0.8s alternate-reverse infinite, fadeIn 1s forwards;
}
.clear-sky-svg .line-1,
.clear-sky-svg .line-3,
.clear-sky-svg .line-5,
.clear-sky-svg .line-7,
.clear-sky-svg .line-4 {
stroke-dashoffset: 5;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.clear-sky-svg .line-2,
.clear-sky-svg .line-6,
.clear-sky-svg .line-8 {
stroke-dashoffset: -5;
}
.big-path,
.lightening,
.line,
.little-path {
stroke-miterlimit: 10;
stroke-width: 2;
stroke-linecap: round;
fill: none;
}