JSFiddle - React, Tailwind, and code Playground

by Ukjin Yang

HTML

<img class="logo" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg%3E%3Cpath d='M186.89 44H224v124.48q0 24.413-4.026 37.559-5.409 17.17-19.624 27.632Q186.134 244 162.86 244q-27.298 0-42.017-16.23-14.718-16.366-14.844-47.888l35.098-4.292q.63 16.9 4.655 23.876 6.038 10.597 18.366 10.597 12.455 0 17.612-7.512 5.158-7.646 5.158-31.522z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E">
<div class="logo"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg%3E%3Cpath d='M186.89 44H224v124.48q0 24.413-4.026 37.559-5.409 17.17-19.624 27.632Q186.134 244 162.86 244q-27.298 0-42.017-16.23-14.718-16.366-14.844-47.888l35.098-4.292q.63 16.9 4.655 23.876 6.038 10.597 18.366 10.597 12.455 0 17.612-7.512 5.158-7.646 5.158-31.522z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E" width="100%" height="100%"></div>
<svg width="256" height="256">
	<g>
		<circle cx="128" cy="128" r="128" fill="#7f0080"/>
		<g>
			<path d="M186.89 44H224v124.48q0 24.413-4.026 37.559-5.409 17.17-19.624 27.632Q186.134 244 162.86 244q-27.298 0-42.017-16.23-14.718-16.366-14.844-47.888l35.098-4.292q.63 16.9 4.655 23.876 6.038 10.597 18.366 10.597 12.455 0 17.612-7.512 5.158-7.646 5.158-31.522z" fill="#fff"/>
		</g>
	</g>
</svg>

CSS

@keyframes logobganim {
  from{background-position:0% 0%}
  to{background-position:100% 0%}
}
svg:hover circle {
  background-color: linear-gradient(45deg, #ad5389, #3c1053);
}
svg:hover circle {
  animation: 3s linear 1s infinite running logobganim;
}

div.logo {
  background: #7f0080;
  background: linear-gradient(45deg, #ad5389, #3c1053, #ad5389);
  background-size: 400% 400%;
  width:256px; height: 256px;border-radius: 50%;
  animation: 1s ease infinite paused alternate logobganim;
}
div.logo:hover {
  
  animation: 1s ease infinite alternate logobganim;
}

img.logo {
  background: #7f0080;
  background: linear-gradient(45deg, #ad5389, #3c1053, #ad5389);
  background-size: 400% 400%;border-radius: 50%;
  animation: 1s ease infinite paused alternate logobganim;
}
img.logo:hover {
  
  animation: 1s ease infinite alternate logobganim;
}