JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
	<path d="M 0 00 H 100 V 100 H 0 Z" fill="transparent" stroke="black" id="path"/>
	<path d="M 100 100 H 200 V 200 H 100 Z" fill="transparent" stroke="black" id="path2"/>
	<rect x="0" y="0" width="60" height="10">
		<animate attributeType="CSS" attributeName="opacity" 
           from="1" to="0" dur="5s" repeatCount="indefinite" />
   </rect>
</svg>

CSS

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

#path {
	animation: spin 5s linear infinite;
	transform-origin: 25% 50%;
}

#path2 {
	animation: spin 5s linear infinite;
	transform-origin: 75% 100%;
}