JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>

JavaScript

var x = -50;
var y = -50;
    
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 1200,
        height: 1200,
      });
      
      for (i=0; i<3; i++){
      x = x + 50;
      y = y + 50;
      
      var layer = [];
      layer[i] = new Kinetic.Layer();
      
      var hex = [];
      (function(x){
       hex[i] = new Kinetic.Shape({
        sceneFunc: function(context) {
          context.beginPath();
          context.moveTo(x+25, 0);
          context.lineTo(x+40, 10);
          context.lineTo(x+40, 25);
          context.lineTo(x+25, 35);
          context.lineTo(x+10, 25);
          context.lineTo(x+10, 10);
          //context.lineTo(50, 25);
        //  context.lineTo(35, 50);
         // context.lineTo(15, 50);
         // context.lineTo(0, 25);
          //context.lineTo(100, 60);
          context.closePath();
          // KineticJS specific context method
          context.fillStrokeShape(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        rotation:0
      });
      })(x);
     
      

      // add the triangle shape to the layer
      //layer.add(hex);
      layer[i].add(hex[i]);

      // add the layer to the stage
      stage.add(layer[i]);
      
      }
      
      
        stage.on('click tap', function(evt) {
              console.log(evt);
              evt.target.tween = new Kinetic.Tween({
                  node: evt.target,
                  duration: 0.3,
                  rotationDeg: evt.target.rotation()+45,
                  easing: Kinetic.Easings.EaseOut
              });
              evt.target.tween.play();
          });