<svg class="animate" width="502px" height="264px" viewBox="0 0 502 264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

	<g id="band">
		<rect id="band-base" fill="#151E28" x="25" y="75" width="452" height="114"></rect>
		<g id="left" fill="#29394B">
			<rect id="1" x="27" y="73" width="34" height="118"></rect>
			<rect id="2" x="66" y="73" width="34" height="118"></rect>
			<rect id="3" x="104" y="73" width="34" height="118"></rect>
			<rect id="4" x="141" y="73" width="34" height="118"></rect>
		</g>
		<g id="right" fill="#29394B">
			<rect id="1" x="327" y="73" width="34" height="118"></rect>
			<rect id="2" x="365" y="73" width="34" height="118"></rect>
			<rect id="3" x="403" y="73" width="34" height="118"></rect>
			<rect id="4" x="441" y="73" width="34" height="118"></rect>
		</g>
		<circle id="face-base" fill="#29394B" cx="251" cy="132" r="103"></circle>
	</g>

	<!-- Face bg -->
	<circle id="face_dark" fill="#151E28" cx="251" cy="132" r="90"></circle>
	<circle id="face_light" fill="#E6E7E8" cx="251" cy="132" r="80.5"></circle>
	<circle id="face_white" fill="#FFFFFF" cx="251" cy="132" r="74.5"></circle>
	
	<!-- Tick Marks -->
	<g id="tick-marks-primary" fill="#151E28">
		<path d="M91 -2V23.5238H87V-2H91Z"/>
		<path d="M24 90H-1.5238V86H24V90Z"/>
		<path d="M91 152V177.524H87V152H91Z"/>
		<path d="M178 90H152.476V86H178V90Z"/>
	</g>
	
	<g id="tick-marks-secondary" stroke="#8D8B8B" stroke-width="2">
		<path d="M30 1C30 1 32.4432 5.22883 33.0019 6.19574"/>
		<path d="M6.28902 32.6997L1.09442 29.7028"/>
		<path d="M0.598083 110.477L5.85647 107.443"/>
		<path d="M33.1895 135.052C33.1895 135.052 31.2053 138.487 30.2132 140.204"/>
		<path d="M107.81 135.052C107.81 135.052 109.795 138.487 110.787 140.204"/>
		<path d="M140.588 110.181C138.849 109.178 135.37 107.171 135.37 107.171"/>
		<path d="M134.882 33.0036C134.882 33.0036 138.42 30.9624 140.102 29.9919"/>
		<path d="M110.778 0.761047C110.778 0.761047 108.335 4.98988 107.776 5.95679"/>
	</g>

	<!-- Hands -->
	<g id="hands" stroke-width="4">
		<path class="hand" id="minute" d="M33,72 L90.7151184,72" stroke="#151E28"></path>
		<path class="hand" id="hour" d="M33,72 L0.483875155,102.516125" stroke="#151E28"></path>
		<path class="hand" id="second" d="M33,72 L13.7162324,0.0319997074" stroke="#F07F75"></path>
	</g>
	
	<!-- Center -->
	<circle class="center" fill="#E6E7E8" cx="251" cy="132" r="12"></circle>
	<circle class="center" fill="#151E28" cx="251" cy="132" r="9"></circle>
	<circle class="center" fill="#29394B" cx="251" cy="132" r="6"></circle>

	<!-- Buttons -->
	<rect class="watch_button" fill="#29394B" x="243" y="20" width="16" height="11"></rect>
	<rect class="watch_button" fill="#29394B" x="241" y="24" width="20" height="8"></rect>

</svg>

<button>Replay</button>
// COLORS
$green: #CCDAB4;
$gray_dark: #11171E;
$gray_mid: #1F2A3B;
$gray_light: #E1E2E4;
$red: #EB6B65;

// BACKGROUND
body {
	background: $green;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	float: left;
	gap: 10vh;
	width: 100vw;
	height: 100vh;	
}

button {
	font-size: 18px;
	color: #29394B;
	text-decoration: none;
	font-family: monospace;
	border: 2px solid #29394B;
	// border-radius: .5em;
	padding: .5em 1em;
	opacity: .8;
	background: hsla(0,0,100,0);
	cursor: pointer;
	&:hover {
		opacity: 1;
		background: white;
		transition: all 150ms ease-in-out 0s;
	}
}

@keyframes animate_band-base {
	0%,4.9% {
		opacity: 0;
		transform: scale(1,0.05);
	}
	5% {
		opacity: 1;
		transform: scale(1,0.05);
	}
	15%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_band-digits {
	0% {
		transform: scale(1,0);
	}
	0.1% {
		transform: scale(1,0.05);
	}
	8%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_face-circle-1 {
	0% {
		transform: scale(0,0);
	}
	0.1% {
		transform: scale(.1,.1);
	}
	25%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_face-circle-2{
	0%,3.4% {
		transform: scale(0,0);
	}
	3.5% {
		transform: scale(.1,.1);
	}
	25%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_face-circle-3 {
	0%,4.9% {
		transform: scale(0,0);
	}
	5% {
		transform: scale(.1,.1);
	}
	25%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_face-circle-4 {
	0%,7.9% {
		transform: scale(0,0);
	}
	8% {
		transform: scale(.1,.1);
	}
	25%,100% {
		transform: scale(1,1);
	}
}
@keyframes animate_face-hand {
	0%,15.9% {
		transform: scale(0,0) translate(219px, 60.5px);
	}
	18% {
		transform: scale(.1,.1) translate(219px, 60.5px);
	}
	35%,100% {
		transform: scale(1,1) translate(219px, 60.5px);
	}
}
@keyframes animate_face-tick-marks-primary {
	0%,11.9% {
		transform: scale(0,0) translate(162px, 44px);
	}
	12% {
		transform: scale(.1,.1) translate(162px, 44px);
	}
	30%,100% {
		transform: scale(1,1) translate(162px, 44px);
	}
}
@keyframes animate_face-tick-marks-secondary {
	0%,11.9% {
		transform: scale(0,0) translate(181px, 62px);
	}
	12% {
		transform: scale(.1,.1) translate(181px, 62px);
	}
	30%,100% {
		transform: scale(1,1) translate(181px, 62px);
	}
}
@keyframes animate_hand-rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

* {
	transform-origin: center;
}

.animate {
	
	#band-base {
		transform: scale(1,0.05);
		animation: animate_band-base 5s cubic-bezier(0,1,1,1) forwards;
	}
	#left, #right {
		transform: scale(1,0.05);
		animation: animate_band-digits 5s cubic-bezier(0,1,1,1) forwards;
	}
	#face-base, .watch_button {
		animation: animate_face-circle-1 5s cubic-bezier(0,1,1,1) forwards;
	}
	#face_white {
		animation: animate_face-circle-4 5s cubic-bezier(0,1,1,1) forwards;
	}
	#face_light {
		animation: animate_face-circle-3 5s cubic-bezier(0,1,1,1) forwards;
	}
	#face_dark {
		animation: animate_face-circle-2 5s cubic-bezier(0,1,1,1) forwards;
	}
	.center {
		animation: animate_face-circle-4 5s cubic-bezier(0,1,1,1) forwards;
	}
	#tick-marks-primary {
		animation: animate_face-tick-marks-primary 5s cubic-bezier(0,1,1,1) forwards;
	}
	#tick-marks-secondary {
		animation: animate_face-tick-marks-secondary 5s cubic-bezier(0,1,1,1) forwards;
	}
	#hands {
		animation: animate_face-hand 5s cubic-bezier(0,1,1,1) forwards;
	}
	#second {
		transform-origin: 33px 72px;
		animation: 
			animate_hand-rotation 60s linear infinite;
	}
	#minute {
		transform-origin: 33px 72px;
		animation: animate_hand-rotation 3600s linear infinite;
	}
	#hour {
		transform-origin: 33px 72px;
		animation: animate_hand-rotation 86400s linear infinite;
	}	
}
View Compiled
$(document).ready(function() {
	
	// Instantly remove and re-apply a class to restart animations	
	$('button').click(function() {
		$('svg').removeClass('animate');
		setTimeout(
			function() {
				$('svg').addClass('animate');
			},1
		)
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js