JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 550">
  <rect width="500" height="550"/>
  <polygon class="hex" points="206.7 75 120.1 25 33.49 75 33.49 175 120.1 225 206.7 175 206.7 75" style="fill:red"/>
  <polygon class="hex" points="293.3 25 206.7 75 206.7 175 293.3 225 379.9 175 379.9 75 293.3 25"/>
  <polygon class="hex" points="293.3 25 206.7 75 206.7 175 293.3 225 379.9 175 379.9 75 293.3 25" style="fill:#ff0"/>
  <polygon class="hex" points="206.7 375 120.1 325 33.49 375 33.49 475 120.1 525 206.7 475 206.7 375" style="fill:blue"/>
  <polygon class="hex" points="293.3 325 206.7 375 206.7 475 293.3 525 379.9 475 379.9 375 293.3 325" style="fill:#f0f"/>
  <polygon class="hex" points="293.3 225 206.7 175 120.1 225 120.1 325 206.7 375 293.3 325 293.3 225" style="fill:lime"/>
  <polygon class="hex" points="379.9 175 293.3 225 293.3 325 379.9 375 466.51 325 466.51 225 379.9 175" style="fill:aqua"/>
</svg>

CSS

BODY {
  margin: 0;
  padding: 0;
}

.hex {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.hex:hover {
  transform: scale(1.5);
  fill: white !important;
}

JavaScript

// svg child node transform origin percentage function 
function svgChildOrigin(elem) {

  // for each svg child node elem
  $(elem).each(function(index) {

    // elem parent svg bounding box
    let $svg = $(this).parent('SVG');
    
    // this node elem bounding area
    let node = this.getBoundingClientRect();

    // calulate our transform origins as a percentange based on our parent svg size
    let translateX = (100 / $svg.outerWidth()) * ((node.width / 2) + node.x);
    let translateY = (100 / $svg.outerHeight()) * ((node.height / 2) + node.y);

    // apply the transform origin css inline style percentages
    $(this).css('transform-origin', translateX + '% ' + translateY + '%');

  });

}

// on ready
$(function() {

  // set svg child node transform origins
  svgChildOrigin('.hex');

});

// window resize
$(window).on('resize', function() {
  
  // re calculate svg child node transform origins
  svgChildOrigin('.hex');

});