JSFiddle - React, Tailwind, and code Playground

by unloco

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">
       
        <image preserveAspectRatio="none" x="1cm" y="1cm" width="3cm" height="3cm" 
        xlink:href="http://api.prestalife.net/media/superman.png" 
        transform="rotate(0, 2.5, 2.5)"
        />
        
        <image preserveAspectRatio="none" x="1cm" y="1cm" width="3cm" height="3cm" 
        xlink:href="http://api.prestalife.net/media/superman.png" 
        transform="rotate(45, 2.5, 2.5)"
        />
    
        <circle cx="2.5cm" cy="2.5cm" r="5" stroke="black" 
        stroke-width="2" fill="#0F0" />
</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://api.prestalife.net/media/superman.png" 
        transform="rotate(0, 250, 250)" 
        />
        
        <image preserveAspectRatio="none" x="100px" y="100px" width="300px" height="300px" 
        xlink:href="http://api.prestalife.net/media/superman.png" 
        transform="rotate(45, 250, 250)"
        />
    
        <circle cx="250px" cy="250px" r="5" stroke="black" 
        stroke-width="2" fill="#0F0" />
</svg>