JSFiddle - React, Tailwind, and code Playground

Guru v3 animations

by herodrigues

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 124" enable-background="new 0 0 300 124" xml:space="preserve">
<g>
	<defs>
		<ellipse id="SVGID_1_" cx="149.2" cy="100.6" rx="44.3" ry="11"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<g clip-path="url(#SVGID_2_)">
		<defs>
			<rect id="SVGID_3_" x="-491.1" y="-321.5" width="1280" height="800"/>
		</defs>
		<clipPath id="SVGID_4_">
			<use xlink:href="#SVGID_3_"  overflow="visible"/>
		</clipPath>
		<rect x="99.9" y="84.5" opacity="0.5" clip-path="url(#SVGID_4_)" fill="#B8CBCD" width="98.5" height="32.1"/>
	</g>
</g>
<g>
	<defs>
		<ellipse id="SVGID_5_" cx="148.2" cy="58.3" rx="44.6" ry="44.9"/>
	</defs>
	<clipPath id="SVGID_6_">
		<use xlink:href="#SVGID_5_"  overflow="visible"/>
	</clipPath>
	<g clip-path="url(#SVGID_6_)">
		<defs>
			<rect id="SVGID_7_" x="-491.1" y="-321.5" width="1280" height="800"/>
		</defs>
		<clipPath id="SVGID_8_">
			<use xlink:href="#SVGID_7_"  overflow="visible"/>
		</clipPath>
		<rect x="98.6" y="8.4" clip-path="url(#SVGID_8_)" fill="#FFD866" width="99.1" height="99.8"/>
	</g>
</g>
<g>
	<defs>
		<ellipse id="SVGID_9_" cx="148.2" cy="58.2" rx="28.8" ry="29"/>
	</defs>
	<clipPath id="SVGID_10_">
		<use xlink:href="#SVGID_9_"  overflow="visible"/>
	</clipPath>
	<g clip-path="url(#SVGID_10_)">
		<defs>
			<rect id="SVGID_11_" x="-491.1" y="-321.5" width="1280" height="800"/>
		</defs>
		<clipPath id="SVGID_12_">
			<use xlink:href="#SVGID_11_"  overflow="visible"/>
		</clipPath>
		<rect x="114.4" y="24.2" clip-path="url(#SVGID_12_)" fill="#FFFFFF" width="67.6" height="68"/>
	</g>
</g>
<g>
	<defs>
		<ellipse...

CSS

.clock-arrow {
  animation: spin 4s infinite linear;
  transform-origin: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}