<body>

	<div class="wrapper">
<svg width="155px" height="145px" viewBox="0 0 155 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-8.000000, -4.000000)">
            <g id="Group" transform="translate(8.000000, 5.000000)">
                <circle id="sun" fill="#D3B84E" cx="71.3253012" cy="71.3253012" r="71.3253012"></circle>
                <circle id="moon" stroke="#D3B84E" fill="#0E1111" cx="77.6746988" cy="71.3253012" r="71.3253012"></circle>
                <path d="M144.957365,63.0806534 C150.466565,67.4441557 153.579244,70.8746778 154.295403,73.3722196 C155.369641,77.1185324 152.211273,84.7688987 150.290012,84.7688987 C148.368751,84.7688987 143.446952,81.4502849 141.581276,77.6498068 C140.337491,75.1161548 141.462855,70.2597703 144.957365,63.0806534 Z" id="head" fill="#D3B84E" transform="translate(147.802130, 73.924776) rotate(196.000000) translate(-147.802130, -73.924776) "></path>
            </g>
        </g>
    </g>
</svg>
</div>

	
<body>
body {
	background: #0E1111;
	display: flex;
	flex-direction: column; 
}



.wrapper {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	width: 500px;
	height: 200px;
	padding: 3rem;
	background:  #0E1111;
	border-radius: 15px;
	text-align: center;
}


svg {
	margin-top: 1rem;
	display: inline-block;
}

//#sun {display:none;}

#moon {
	transform: translate(-150px, 0);
	//display: none;
	stroke-width: 2;
	stroke-opacity:  1;
  	stroke-dasharray: 700;
  	stroke-dashoffset: 700;
	stroke-miterlimit: 2; 
  	//transform-origin: 00px 0px;
	animation: eclipse 2s ease forwards, line 2s 1.8s ease-out forwards;
}
	


@-webkit-keyframes eclipse {
		0% {transform: translate(-150px, 0);	}
	100% {transform: translate(0px, 0);}
	
} 

@keyframes line {
  to {
    stroke-dashoffset: 0;
  }
}



#head {
	opacity: 0;
	animation: appear 1s 2.7s linear forwards;
}


@keyframes appear {
  to {
    opacity: 1;
	}

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.