body , html{
	background-color: #262028;
	box-sizing: border-box;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	height:100%;
  	position:relative;
}

svg{
	width:60%;
	height: 60%;
	max-height:500px;
}

svg g g g:nth-of-type(2) path{
	transition : all;
	animation: appear 1s forwards;
	fill: transparent;
}

svg g g g:nth-of-type(2) path:nth-of-type(2){
	animation-delay: .2s;
}
svg g g g:nth-of-type(2) path:nth-of-type(3){
	animation-delay: .4s;
}
svg g g g:nth-of-type(2) path:nth-of-type(4){
	animation-delay: .6s;
}
svg g g g:nth-of-type(2) path:nth-of-type(5){
	animation-delay: .8s;
}
svg g g g:nth-of-type(2) path:nth-of-type(6){
	animation-delay: 1s;
}
svg g g g:nth-of-type(2) path:nth-of-type(7){
	animation-delay: 1.2s;
}
svg g g g:nth-of-type(2) path:nth-of-type(8){
	animation-delay: 1.4s;
}
svg g g g:nth-of-type(2) path:nth-of-type(9){
	animation-delay: 1.6s;
}

svg > g > g:nth-of-type(2){
	fill-opacity: 0;
	animation: show 1s forwards;
	animation-delay:2s;
}

@keyframes appear{
	from {
		fill :transparent ;	
	}
	to {
		fill : white ;
	}
}

@keyframes show{
	from {
		fill-opacity :0 ;	
	}
	to {
		fill-opacity : 1 ;
	}
}