JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="5cm" height="5cm" style="background-color: #EEE" viewBox="0 0 5 5">

  <defs>  
    <clipPath id="a1">
    <rect x="0" y="0" width="3" height="3" />
  </clipPath>
  </defs>

   <image preserveAspectRatio="none" x="1" y="1" width="3" height="3" 
    xlink:href="http://i.stack.imgur.com/pDaOo.png" 
    transform="rotate(0, 2.5, 2.5)"
    />

    <image preserveAspectRatio="none" x="1" y="1" width="3" height="3" 
    xlink:href="http://i.stack.imgur.com/pDaOo.png" 
    transform="rotate(45, 2.5, 2.5)"
    />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
    width="500px" height="500px" style="background-color: #EEE">
       
        <image preserveAspectRatio="none" x="100px" y="100px" width="300px" height="300px" 
        xlink:href="http://i.stack.imgur.com/pDaOo.png" 
        transform="rotate(0, 250, 250)" 
        />
        
        <image preserveAspectRatio="none" x="100px" y="100px" width="300px" height="300px" 
        xlink:href="http://i.stack.imgur.com/pDaOo.png" 
        transform="rotate(45, 250, 250)"
        />
    
        <circle cx="250px" cy="250px" r="5" stroke="black" 
        stroke-width="2" fill="#0F0" />
</svg>