JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<svg>
  <circle fill="#FFFFFF" stroke="#B450FF" stroke-width="6" stroke-miterlimit="10" cx="153" cy="127" r="6">
	<animate
		attributeName="cy"
		from="127"
		to="127"
		begin="0s"
		dur="4s"
		values="127;117;117;90;90;127;127"
		keySplines="
			0.1 0.8 0.2 1;
			0.1 0.8 0.2 1;
			0.1 0.8 0.2 1;
			0.1 0.8 0.2 1;
			0.1 0.8 0.2 1;
			0.1 0.8 0.2 1"
		keyTimes="
			0;0.22;0.33;0.55;0.66;0.88;1"
		calcMode="spline"
		repeatCount="indefinite"
	/>
</circle>
</svg>

CSS

svg {width:100%;height:500px;}