JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="canvas" onload="startup(evt)" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
	<line id="line1" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line2" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line3" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
	<line id="line4" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
    <circle id="centro" cx="0" cy="0" r="3" stroke="black" stroke-width="2" fill="red"/>
</svg>

CSS

HTML,BODY {
	width:100%;
	height:100%;
	border: rgba(0,0,0,1);
}

#canvas {
	position:absolute;
	top:0;
	left:0;
	border:1px #333333 solid;
}

JavaScript

// Esto es para acceder al DOM de la SVG
var svgDoc;
function startup(evt){
  svgDoc=evt.target.ownerDocument;
}

// Load event de mi HTML
$(document).ready(function() {

	// Dibujar el rectangulo a 45 grados
    setInterval(function(){draw(1);},10);

});

// #1 - Defino mi RECTANGULO con 4 puntos
var matriz = Array({x:250,y:150},{x:250,y:250},{x:450,y:250},{x:450,y:150});

function draw(grados) {
	var Ox = (Math.max(matriz[0].x,matriz[1].x,matriz[2].x,matriz[3].x)-Math.min(matriz[0].x,matriz[1].x,matriz[2].x,matriz[3].x))/2+Math.min(matriz[0].x,matriz[1].x,matriz[2].x,matriz[3].x);
	var Oy = (Math.max(matriz[0].y,matriz[1].y,matriz[2].y,matriz[3].y)-Math.min(matriz[0].y,matriz[1].y,matriz[2].y,matriz[3].y))/2+Math.min(matriz[0].y,matriz[1].y,matriz[2].y,matriz[3].y);
  
    var sen=Math.sin(grados*Math.PI/180);
    var cos=Math.cos(grados*Math.PI/180);
    for (var i=0; i<4; i++) {
        var x=matriz[i].x-Ox;
        var y=matriz[i].y-Oy;
        matriz[i].x=(x*cos-y*sen)+Ox;
        matriz[i].y=(x*sen+y*cos)+Oy;
	}

	trazarFigura(Ox,Oy);
}

// #3 - Funcion para dibujar las lineas de mi figura rectangular
function trazarFigura(cx,cy) {
	var linea = document.getElementById("line1");
	linea.setAttribute("x1", matriz[0].x);
	linea.setAttribute("y1", matriz[0].y);
	linea.setAttribute("x2", matriz[1].x);
	linea.setAttribute("y2", matriz[1].y);

	linea = document.getElementById("line2");
	linea.setAttribute("x1", matriz[1].x);
	linea.setAttribute("y1", matriz[1].y);
	linea.setAttribute("x2", matriz[2].x);
	linea.setAttribute("y2", matriz[2].y);

	linea = document.getElementById("line3");
	linea.setAttribute("x1", matriz[2].x);
	linea.setAttribute("y1", matriz[2].y);
	linea.setAttribute("x2", matriz[3].x);
	linea.setAttribute("y2", matriz[3].y);

	linea = document.getElementById("line4");
	linea.setAttribute("x1", matriz[3].x);
	linea.setAttribute("y1", matriz[3].y);
	linea.setAttribute("x2", matriz[0].x);
	linea.setAttribute("y2", matriz[0].y);
    
    var...