JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="400" height="400"  >
    
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
    
    <rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" fill="url(#grad1)" stroke="black"/>
    <circle cx="100" cy="100" r="5" stroke="black" stroke-width="3" fill="red" />
    
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:rgb(0,0,0)" />
    <g transform="translate(200,0)">
        <!-- ^ this group element is just so we can move the new object out of the way so we can see both objects -->
    
    <rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" fill="url(#grad1)"  stroke="black"/>
    <circle cx="100" cy="100" r="5" stroke="black" stroke-width="3" fill="red" />

    </g>
</svg>