Providence Logo Animation

by Scott Kaye

HTML

<svg id="providence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
	<!-- 3 dots -->
	<path d="M480.8 788.57h38.4v38.4h-38.4zm74.13 0h38.4v38.4h-38.4zm-148.25 0h38.4v38.4h-38.4zM480.8 170.7h38.4v38.4h-38.4zm74.13 0h38.4v38.4h-38.4zm-148.25 0h38.4v38.4h-38.4z" fill="currentColor" />

	<!-- Outer circle -->
	<path d="M500 89.95C268.42 89.95 80.68 273.53 80.68 500c0 226.46 187.74 410.05 419.32 410.05 231.58 0 419.32-183.6 419.32-410.05 0-226.47-187.74-410.05-419.32-410.05zm0 33.7c212.55 0 384.86 168.5 384.86 376.35 0 207.85-172.3 376.36-384.86 376.36-212.55 0-384.86-168.5-384.86-376.36S287.44 123.64 500 123.64z" fill="currentColor" />

	<!-- Eyelid -->
	<g id="eyelid">
		<path d="M500 243.44C126.42 243.44 0 500 0 500s125.43 256.56 500 256.56c369.84 0 500-256.56 500-256.56S867.97 243.44 500 243.44z" fill="#fff" />
		<path d="M500 243.44C126.42 243.44 0 500 0 500s125.43 256.55 500 256.55c369.84 0 500-256.55 500-256.55S867.97 243.44 500 243.44zm0 32.18C836.28 275.62 956.95 500 956.95 500S838 724.38 500 724.38C157.68 724.38 43.05 500 43.05 500S158.6 275.62 500 275.62z"
			fill="currentColor" />
	</g>

	<!-- Inner circle -->
	<path d="M500 243.44c-144.9 0-262.35 114.87-262.35 256.56 0 141.7 117.46 256.56 262.35 256.56 144.9 0 262.35-114.87 262.35-256.56 0-141.7-117.46-256.56-262.35-256.56zm0 32.32c126.64 0 229.3 100.4 229.3 224.24S626.65 724.24 500 724.24c-126.64 0-229.3-100.4-229.3-224.24 0-123.85 102.66-224.24 229.3-224.24z" fill="currentColor" />

	<!-- Graph -->
	<path id="graph" d="M276.87 593.05l98.33-84.85 85.3 49.73 88.3-88.3 82.14 46.03 90.98-98.58" stroke="currentColor" stroke-width="30" stroke-linecap="round" fill="none" />
</svg>

SCSS

svg#providence-logo {	
	transform: translateZ(0);

	#eyelid {
		transform-origin: center;
		animation: spin 4s ease 1;
	}
	
	#graph {
		animation: draw 1s 500ms cubic-bezier(0.1, 0.45, 0.75, 1) 1 forwards;
		stroke-dasharray: 600;
		stroke-dashoffset: 600;
		stroke-width: 20;
	}
}

@keyframes spin {
	10% {
		transform: rotateZ(-5deg);
	}	
	30% {
		transform: rotateZ(370deg);
	}
	50% {
		transform: rotateZ(355deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

@keyframes draw {
	50% {
		stroke-width: 30;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-width: 30;
	}
}

html {
    width: 400px;
    margin: 50px;
}