JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<svg class="canvas" xmlns="http://www.w3.org/2000/svg">
  <polygon class="main"></polygon>
</svg>
</body>

CSS

.main {
  fill: none;
  stroke: indigo;
  stroke-width: 1;
  animation: rotate 5s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

JavaScript

var centre = [0,0];
var radius = 70;
var numPoints = 3;
var theta = 350.00 / numPoints;

points = ""
for (var i = 1; i <= numPoints; i++) {

    // calc x/y
    x = radius * Math.cos(2*Math.PI*i/numPoints + theta) + centre[0];
    y = radius * Math.sin(2*Math.PI*i/numPoints + theta) + centre[1];

		points = points + `${x},${y} `
}


// create div at point:
var polygon = document.getElementsByClassName("main")[0]
polygon.setAttribute('points', points);

var canvas = document.getElementsByClassName("canvas")[0]
canvas.setAttribute('viewBox', "1 1 1 1");