JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect transform="rotate(0 0,0) " id="svg_1" height="101px" width="101px" y="500" x="100" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_2" height="101px" width="101px" y="500" x="200" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_3" height="101px" width="101px" y="500" x="300" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_4" height="101px" width="101px" y="500" x="400" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_5" height="101px" width="101px" y="500" x="500" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_6" height="101px" width="101px" y="500" x="600" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_7" height="101px" width="101px" y="500" x="700" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_8" height="101px" width="101px" y="500" x="800" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_9" height="101px" width="101px" y="500" x="900" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <rect transform="rotate(0 0,0) " id="svg_10" height="101px" width="101px" y="500" x="1000" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="none" />
    <text xml:space="preserve" width="10%"...

JavaScript

var x = 0;
var y = 0;

function setRotate() {
  if (x > 360) {
    x = 0
  }
  y++;
  x += .01;

  document.getElementById("svg_1").setAttribute("transform", "rotate(" + Math.sin(x) + " " + Math.cos(y) + "," + x + ")");
  document.getElementById("svg_2").setAttribute("transform", "rotate(" + Math.sin(x) + " " + Math.cos(y) + "," + x * Math.random() + ")");
  document.getElementById("svg_3").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x * Math.random() + "," + x * Math.random() + ")");
  document.getElementById("svg_4").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x * Math.random() + "," + x * Math.random() + ")");
  document.getElementById("svg_5").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x * Math.random() + "," + x * Math.random() + ")");
  document.getElementById("svg_6").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x * Math.random() + "," + x * Math.random() + ")");
  document.getElementById("svg_7").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x + "," + x + ")");
  document.getElementById("svg_8").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x + "," + x + ")");
  document.getElementById("svg_9").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x + "," + x + ")");
  document.getElementById("svg_10").setAttribute("transform", "rotate(" + Math.sin(x) + " " + x * Math.random() + "," + x * Math.random() + ")");
}
window.setInterval("setRotate()", 1000);