<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
 
 
 
 <svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-sun" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
 
 
 
 
 <style>
   

.container-sun{
  text-align:center;
}
/* the svg element */
.svg-sun{
  width:230px;
  height:230px;

  -webkit-transform-origin: center center;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin:50% 50%;

-webkit-animation: spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-moz-animation: spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-o-animation:spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-ms-animation: spin 25s linear infinite, sun-glow 3s 0s ease-in-out infinite;
animation: spin 25s linear infinite,sun-glow 3s 0s linear infinite;

}
/* the circle element in the svg itself */
#sun{
  stroke-width:18;
  stroke-dasharray:2;
  stroke-dashoffset:2;
}
/* animation for the sun glowing effect */
@-webkit-keyframes sun-glow { 
	0% { fill: #f1c40f; stroke:#f1c40f;}
	50% { fill: #e67e22; stroke:#e67e22;}
	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-moz-keyframes sun-glow { 
	0% { fill: #f1c40f; stroke:#f1c40f;}
	50% { fill: #e67e22; stroke:#e67e22;}
	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-o-keyframes sun-glow { 
	0% { fill: #f1c40f; stroke:#f1c40f;}
	50% { fill: #e67e22; stroke:#e67e22;}
	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-ms-keyframes sun-glow { 
	0% { fill: #f1c40f; stroke:#f1c40f;}
	50% { fill: #e67e22; stroke:#e67e22;}
	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@keyframes sun-glow { 
	0% { fill: #f1c40f; stroke:#f1c40f;}
	50% { fill: #e67e22; stroke:#e67e22;}
	100% { fill: #f1c40f; stroke:#f1c40f;}
}

/* start spin animation */
@-webkit-keyframes spin{
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spin{
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-o-keyframes spin{
	100% {
		-o-transform: rotate(360deg);
	}
}
@-ms-keyframes spin{
	100% {
		-ms-transform: rotate(360deg);
	}
}
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
}

   
</style>
 
 
 
 
 
 
 <circle cx="50" cy="50" r="35" id="sun"></circle>
 
 
 
 
      
    </svg>