Inline SVG Element not working on Div

Question

I have this snippet. My end game is to use a larger hexagon as a container for the generated hexagons. I am using an inline svg element but it does not seem that the mask is applying to the div with the inner class like I hoped. Am I implementing it wrong or missing something?

If I had to guess is it because my coordinates for the hexagon are larger than 1 which would break boundingBox?

$(document).ready(function() {
    var wrapper = document.getElementsByClassName('inner')[0];
    
    for(var i = 0; i <= 250; i++) {
      var hex = document.createElement('div');
      
      var colors = ['red-hex', 'blue-hex','yellow-hex'];
      var hexColor = Math.floor(Math.random() * colors.length);
      
      hex.className = 'hexagon ';
      hex.className += colors[hexColor];
      hex.innerHTML = '<i class="mdi mdi-hexagon" aria-hidden="true"></i>';
    
      var size = (Math.random()* (200-100)) + 100;
      hex.style.fontSize = size + 'px';
      
      var posx = (Math.random() * wrapper.offsetWidth - size).toFixed();
      var posy = (Math.random() * wrapper.offsetHeight - size).toFixed();
      
      hex.style.top = posy+'px';
      hex.style.left = posx+'px';
      
      wrapper.appendChild(hex);
    } 
});

.hexagon_wrapper {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
 }

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-clip-path: url("#clipping");
          clip-path: url("#clipping");
}

.hexagon {
  position: absolute;
  /* mix-blend-mode: color-dodge; looks wicked */
  mix-blend-mode: saturation;
  padding: 10px;
}

.red-hex {
  color: #fe412b;
  -webkit-animation:fade-in 6s infinite;
}

.blue-hex {
  color: #39b1e3;
  -webkit-animation:fade-in 5s infinite;
}

.yellow-hex {
  color: #fcfe41; 
  -webkit-animation:fade-in 4s infinite;
}

@-webkit-keyframes fade-in{
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.5;
  }
}

<link href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hexagon_wrapper">
  <div class="inner">
  </div>
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping" clipPathUnits ="objectBoundingBox">
        <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" />
      </clipPath>
    </defs>
  </svg>
</div>

Answer 1

I have rewritten your polygon to fit within a viewBox of 1x1, then it works. I haven't figured out what the exact reason is for this behavior.

$(document).ready(function() {
    var wrapper = document.getElementsByClassName('inner')[0];
    
    for(var i = 0; i <= 250; i++) {
      var hex = document.createElement('div');
      
      var colors = ['red-hex', 'blue-hex','yellow-hex'];
      var hexColor = Math.floor(Math.random() * colors.length);
      
      hex.className = 'hexagon ';
      hex.className += colors[hexColor];
      hex.innerHTML = '<i class="mdi mdi-hexagon" aria-hidden="true"></i>';
    
      var size = (Math.random()* (200-100)) + 100;
      hex.style.fontSize = size + 'px';
      
      var posx = (Math.random() * wrapper.offsetWidth - size).toFixed();
      var posy = (Math.random() * wrapper.offsetHeight - size).toFixed();
      
      hex.style.top = posy+'px';
      hex.style.left = posx+'px';
      
      wrapper.appendChild(hex);
    } 
});

.hexagon_wrapper {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
 }

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-clip-path: url("#clipping");
          clip-path: url("#clipping");
}

.hexagon {
  position: absolute;
  /* mix-blend-mode: color-dodge; looks wicked */
  mix-blend-mode: saturation;
  padding: 10px;
}

.red-hex {
  color: #fe412b;
  -webkit-animation:fade-in 6s infinite;
}

.blue-hex {
  color: #39b1e3;
  -webkit-animation:fade-in 5s infinite;
}

.yellow-hex {
  color: #fcfe41; 
  -webkit-animation:fade-in 4s infinite;
}

@-webkit-keyframes fade-in{
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.5;
  }
}

<link href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hexagon_wrapper">
  <div class="inner">
  </div>
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping" clipPathUnits ="objectBoundingBox">
                <polygon points=".5 .01, 0.95 .25, .95 .75, .50 .99, .05 .75, .05 .25" />
      </clipPath>
    </defs>
  </svg>
</div>