Example

by Muthuraman B

HTML

<svg>
	<circle class="circle" cx="295.5" cy="554.6" r="50" stroke="#172d51" stroke-width="5" fill-opacity="0" />
    <circle class="logo" cx="295.5" cy="554.6" r="257" fill="#172d51"/>
  
  <circle class="circle" cx="400" cy="200" r="50" stroke="#231f20" stroke-width="5" fill-opacity="0" />  
  <circle class="logo" cx="400" cy="200" r="42"/>  
</svg>

CSS

svg {
  width:100%;
  height:1000vh;
}
.logo {	
	opacity: 0;
	animation: fadeIn 0.75s linear forwards;
	animation-delay: 1s;
}

.circle {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: stroke 2s ease-out forwards;
}

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

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}