JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="game">
    <svg></svg>
  </div>
  <div id="svgs">
      <svg>
        <defs>
          <svg xmlns="http://www.w3.org/2000/svg" width="126" height="109.54" viewBox="0 0 126 109.54">
            <title>zug_front</title>
            <rect x="37.35" y="96.54" width="2" height="6.72" fill="#f7941e"></rect>
            <rect x="37.32" y="110.5" width="2" height="7" transform="translate(36.15 -14.36) rotate(18.02)" fill="#f7941e"></rect>
            <rect x="39.18" y="110.5" width="2" height="7" transform="translate(-27.56 5.13) rotate(-14.1)" fill="#f7941e"></rect>
            <rect x="87" y="96.54" width="2" height="6.72" fill="#f7941e"></rect>
            <rect x="86.97" y="110.5" width="2" height="7" transform="translate(38.59 -29.72) rotate(18.02)" fill="#f7941e"></rect>
            <rect x="88.82" y="110.5" width="2" height="7" transform="translate(-26.07 17.23) rotate(-14.1)" fill="#f7941e"></rect>
            <rect x="7" y="20.54" width="112" height="78" rx="4.91" ry="4.91" fill="#fdef45"></rect>
            <ellipse cx="59.8" cy="22.79" rx="6.16" ry="14.8" transform="translate(-3.51 0.11) rotate(-7.69)" fill="#c13227"></ellipse>
            <ellipse cx="51.17" cy="29.62" rx="7.45" ry="15.95" transform="translate(-8.62 27.76) rotate(-36.11)" fill="#c13227"></ellipse>
            <path d="M105,75.5A16.5,16.5,0,1,1,88.5,59,16.5,16.5,0,0,1,105,75.5ZM39.5,59A16.5,16.5,0,1,0,56,75.5,16.5,16.5,0,0,0,39.5,59Z" transform="translate(-1 -8.09)" fill="#fff"></path>
            <ellipse cx="55.5" cy="82.41" rx="3.5" ry="1.5" fill="#f7941e"></ellipse>
            <circle cx="86.5" cy="71.41" r="2.5" fill="#231f20"></circle>
            <circle cx="37.5" cy="71.41" r="2.5" fill="#231f20"></circle>
            <path d="M127,88.5c0,1.93-2.69,3.5-6,3.5s-6-1.57-6-3.5,2.69-3.5,6-3.5S127,86.57,127,88.5ZM7,85c-3.31,0-6,1.57-6,3.5S3.69,92,7,92s6-1.57,6-3.5S10.31,85,7,85Z" transform="translate(-1 -8.09)" fill="#fdef45"></path>
            <path...

JavaScript

var serializer = new XMLSerializer();

var svgNode = serializer.serializeToString(document.querySelector('#svgs svg defs svg'));

var dataset = [1,8,15,22,29,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155,162,169,176,183,190,197,204,211,218,225,232,239,246,253,260,267,274,281,288,295,302,309,316,323,330,337,344,351,358]

var wrapper = d3
    .select('#game svg')
        .attr('width', window.innerWidth)
        .attr('height', window.innerHeight)
    .selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
            .html(function(d) { return svgNode; })
            .transition()
            .duration(1500)
            .attrTween('transform', function(d) { 
                return d3.interpolateString('translate(0,0) rotate(0)','translate(50,50)' +
                       'rotate(' + d * 1.8 + ', 63, 54.77)');
            });