<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 600 600" xml:space="preserve">
<circle id="st4" cx="299.529" cy="299.628" r="50.167"/>
<path id="st1" fill="none" stroke-miterlimit="10" d="M299.529,197.628  c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728  c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559  c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"/>
<path id="st2" fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736,248.922  c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505  c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601  c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213  c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"/>
<path id="st3" fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821,351.482  c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566  c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582  c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499  C285.567,460.886,244.898,410.344,210.821,351.482z"/>
</svg>
</div>
<form action="">
	<button type="submit">Replay</button>
</form>

$color: #00D8FF;
$strokeW: 24;
body{
	background: rgba(black, .85);
	overflow: hidden;
}
div{
	width: 300px;
	margin: auto;
	left: 0;
	right: 0;
	transform: translateY(-60%);
	top: 50%;
	position: absolute;
}
#st1{
	stroke-dasharray: 1223.460205078125 1223.460205078125;
	stroke-dashoffset: 1223.460205078125;
	stroke-width: 3;
	stroke: lightgray;
	animation: anim 2s 1.5s ease forwards, color .35s 3.15s ease forwards;
}
#st2{
	stroke-dasharray: 1223.4583740234375 1223.4583740234375;
	stroke-dashoffset: 1223.4583740234375;
	stroke-width: 3;
	stroke: lightgray;
	animation: anim 2s 1.5s ease forwards, color .35s 3.15s ease forwards; 
}
#st3{
	stroke-dasharray: 1223.4610595703125 1223.4610595703125;
	stroke-dashoffset: 1223.4610595703125;
	stroke-width: 3;
	stroke: lightgray;
	animation: anim 2s 1.5s ease forwards, color .35s 3.15s ease forwards; 
}
#st4{
	stroke-dasharray: 315.2085561547927 315.2085561547927;
	stroke-dashoffset: 315.2085561547927;
	stroke-width: 3;
	stroke: lightgray;
	fill: none;
	animation: circle 1.5s ease-in forwards;
}
@keyframes anim {
	85%{
		stroke-dashoffset: 0;
		stroke-width: 3;
		stroke: lightgray;
		stroke: $color;
	}
	100%{
		stroke-dashoffset: 0;
		stroke-width: 0;
		stroke: $color;
	}
}
@keyframes color {
	from{
		stroke-width: 3;
	}
	to{
		stroke-width: $strokeW;
	}
}
@keyframes replay {
	to{
		transform: translateY(0);
	}
}
@keyframes circle {
	85%{
		stroke-dashoffset: 0;
		stroke-width: 3;
		stroke: gray;
		fill: rgba(255,255,255, 0);
	}
	100%{
		stroke-dashoffset: 0;
		stroke-width: 0;
		fill: $color;
	}
}
button{
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
	margin: auto;
	width: 80px;
	padding: 8px 0;
	color: $color;
	font-size: 12px;
	border-radius: 4px;
	background: transparent;
	border: solid 1px gray;
	cursor: pointer;
	outline: none;
	transform: translateY(300%);
	animation: replay .3s 5s ease forwards;
}

/*
**
React logo SVG animated.
My React logo CSS with a single element version is here: https://codepen.io/jotavejv/pen/LRGQzq
**
*/

document.getElementById('st1').getTotalLength(); //1223.460205078125
document.getElementById('st2').getTotalLength(); //1223.4583740234375
document.getElementById('st3').getTotalLength(); //1223.4610595703125