Sun animation - SVG

by Lio Fleishman

HTML

<div class="anim_container">
	<span class="dotted_circle">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
	<path style="fill:#4EB540;" d="M99.9,63.3c1.3,0,2.4,1,2.4,2.2c0.1,1.3-1.1,2.4-2.4,2.4c-1.4,0-2.2-0.8-2.2-2.2
		C97.6,64.3,98.5,63.2,99.9,63.3z"/>
	<path style="fill:#4EB540;" d="M99.7,136.7c-1.3-0.1-2.2-1-2.1-2.5c0.1-1.3,1-2.2,2.4-2.2c1.3,0.1,2.3,1.2,2.2,2.4
		C102.2,135.8,101.2,136.7,99.7,136.7z"/>
	<path style="fill:#4EB641;" d="M63,100.2c0-1.4,0.8-2.2,2.2-2.2c1.3,0,2.4,1.1,2.4,2.3c0,1.3-1,2.3-2.2,2.3
		C63.8,102.5,63,101.7,63,100.2z"/>
	<path style="fill:#4FB641;" d="M111.1,67.7c-0.5,0.7-1.1,1.3-2.1,1.4c-1.3,0-2.2-0.6-2.5-2.1c-0.2-0.6,0.6-2.1,1.3-2.3
		c1.1-0.4,2.4-0.1,3.1,0.9c0.1,0.2,0.2,0.4,0.3,0.4C111.2,66.6,111.3,67.2,111.1,67.7z"/>
	<path style="fill:#4EB641;" d="M122.1,76c0.1-1.5,0.9-2.3,2.2-2.3c1.3,0,2.4,1.1,2.3,2.3c0,1.3-1.2,2.3-2.6,2.2
		C122.9,78.1,122.1,77.2,122.1,76z"/>
	<path style="fill:#4EB641;" d="M111.2,134.1c-1.3,2-3.3,2.2-4.3,0.4c-0.4-0.7-0.2-2.5,0.5-3.1c0.9-0.7,2.5-0.5,3.2,0.4
		c0.2,0.3,0.4,0.5,0.5,0.9C111.2,133.2,111.2,133.7,111.2,134.1z"/>
	<path style="fill:#4EB641;" d="M134.4,102.5c-1.3,0-2.3-1.2-2.2-2.4c0.1-1.3,1.3-2.2,2.5-2.2c1.2,0,2.3,1.2,2.3,2.3
		C136.9,101.6,135.8,102.6,134.4,102.5z"/>
	<path style="fill:#4EB641;" d="M135.7,92c-1.1,1.7-2.7,2.1-3.9,1c-1-1-1-2.3-0.1-3.4c0.7-0.8,2.3-0.8,3.2,0
		c0.3,0.3,0.4,0.5,0.7,0.8C135.8,90.9,135.8,91.5,135.7,92z"/>
	<path style="fill:#4FB641;" d="M124.3,126.9c-1.4,0-2.2-0.9-2.2-2.5c0-1.3,0.9-2.1,2.2-2.1c1.3,0,2.3,1.1,2.3,2.3
		C126.7,125.7,125.6,126.9,124.3,126.9z"/>
	<path style="fill:#4EB641;" d="M75.3,78.2c-1.2,0-2.3-1.2-2.2-2.2c0-1.3,1.3-2.4,2.4-2.3c1.3,0,2.4,1.2,2.3,2.4
		C77.7,77.3,76.6,78.2,75.3,78.2z"/>
	<path style="fill:#4FB641;"...

SCSS

$containerSize: 200px;
$timeAnim: 6s;

.anim_container {
	position: relative;
  margin: 22px;
  width: $containerSize;
  height: $containerSize;
}

.dotted_circle {
	position: absolute;
	width: 100%;
	height: 100%;
		transform-origin: center;
	-webkit-animation:unspin $timeAnim linear infinite;
	-moz-animation:unspin $timeAnim linear infinite;
	animation:unspin $timeAnim linear infinite;
	position:absolute;
}
.inner_circle {
		transform-origin: center;
	-webkit-animation:spin $timeAnim linear infinite;
	-moz-animation:spin $timeAnim linear infinite;
	animation:spin $timeAnim linear infinite;
	width:100%;
	height:100%;
	position:absolute;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);}}

@-moz-keyframes unspin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes unspin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes unspin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg);}}

JavaScript

//ClickSoftware sun logo animation