SVG circle border animation

index.html

<svg height="200" width="200">
	<circle class="circle" cx="100" cy="100" r="95" stroke="#231f20" stroke-width="10" fill-opacity="0" />
</svg>
<div class="logo"></div>

style.scss

body {
	height: 100vh;
	position: relative;
	background-color: #f5f5f5;
}

svg,
.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.logo {
	width: 140px;
	height: 140px;
	background-color: #231f20;
	border-radius: 100px;
	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;
	}
}

svg-circle-border-animation.markdown

SVG circle border animation

A Pen by Nico Schenker on CodePen.

License.