JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 1400 900" style="outline:1px solid red;">
				<g>
			       <clipPath id="hexagonal-mask">
			          <circle cx="700" cy="100" r="705" ></circle>
			       </clipPath>
			    </g> 
			    <a>
			     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="http://placekitten.com/800/400"  style="transform: translateY(-140px);"/>
			    </a>

			    <g  style="transform-origin: 701px -5%; transform: rotateZ(15deg)">
				    <circle cx="701" cy="0" r="665" stroke="#fff" stroke-width="1px" fill="transparent"  style="transform: translateY(-50px);" ></circle>
				   
				    <!-- center dot -->
				    <g id="f" class="fuck">
					    <circle cx="701" cy="615" r="15" fill="#fff" stroke-width="4" stroke="#000">
					    	
					    </circle> 
					    <path  stroke="#000" stroke-width="1px" d="M701 630 701 690"></path>
					   
					    <text x="672" y="720" font-family="'Playfair Display', serif" font-size="2em" font-weight="bold" fill="#9d9e9f">2007</text>
						<text x="640" y="730" font-family="'Playfair Display', serif" font-size="2.85em" font-weight="bold" fill="#000">
							<tspan x="640" dy="40">Lorem</tspan>
							<tspan x="640" dy="45">Ipsum</tspan>
						</text>
						
						<animateMotion 
				           xlink:href="#f"
				           dur="1s"
				           begin="click"
				           fill="freeze"
				           path="M0 100 Q50 80 -399 -135"
				           repeatCount="1">
					   		
					  	</animateMotion>
					</g>
					
					
					

					<!-- left dot -->
					<g>
				    	<!-- <circle cx="305" cy="485" r="15" fill="#fff"></circle> -->
				    	<circle cx="302" cy="480" r="15" fill="#fff" stroke-width="4" stroke="#000"></circle>
				    	<path stroke="#000" stroke-width="1px" d="M302 495 305 675"></path>
					</g>

					<!-- right dot -->
					<g>
				    	<circle cx="1100" cy="480" r="15" fill="#fff" stroke-width="4" stroke="#000"></circle>
				    	<path  stroke="#000" stroke-width="1px" d="M1100 495...