JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 650">
	<defs>
		<style><![CDATA[
			#scroll{
				animation:2s scroll infinite;
				transform:translateY(100px);
			}

			@keyframes scroll{
				0%{ transform:translateY(0px); }
				50%{ transform:translateY(100px); }
				100%{ transform:translateY(0px); }
			}
		]]></style>
	</defs>

	<path d="M248.33 21.38C193.36 21.38 148.8 65.93 148.8 120.9C148.8 171.79 148.8 228.83 148.8 280.7C148.8 332.97 191.18 375.35 243.45 375.35C265 375.35 235 375.35 256.55 375.35C308.82 375.35 351.2 332.97 351.2 280.7C351.2 228.83 351.2 174.22 351.2 123.94C351.2 67.3 305.28 21.38 248.63 21.38C228.66 21.38 268.9 21.38 248.33 21.38Z" fill="transparent" stroke="#0072FF" stroke-width="10"></path>
	<path d="M249.77 106.76C242.29 106.76 236.22 112.83 236.22 120.31C236.22 130.86 236.22 149.47 236.22 160.15C236.22 167.27 241.99 173.04 249.11 173.04C252.04 173.04 247.96 173.04 250.89 173.04C258.01 173.04 263.78 167.27 263.78 160.15C263.78 149.47 263.78 131.19 263.78 120.73C263.78 113.01 257.53 106.76 249.81 106.76C247.09 106.76 252.57 106.76 249.77 106.76Z" fill="#0072FF" id="scroll"></path>
</svg>

CSS

svg{
  width:100px;
  height:150px;
}