Маска /Clip-Path Div с детьми?

Question

Итак, у меня есть эта скрипка https://jsfiddle.net/OMGDrAcutla/24kbw8mq/1/

Желаемый эффект довольно близок. Моя конечная игра заключается в следующем. Изображение для справки

Кажется, что SVG clipPath не работает. То, что я хочу сделать, это ограничить div в форме шестиугольника в соответствии с эталонным изображением. Я не могу точно определить, что может быть не так с моей скрипкой.

Есть ли более простой способ добиться этого эффекта? Будет ли простой способ сделать шестиугольник в иллюстраторе и наложить его с использованием z-индекса, будет более простым способом сделать это?

Конец игры Я могу справиться с отсутствием пары шестиугольников, но хотел бы как можно больше имитировать изображение.

Любая помощь с благодарностью. Я так близко, я могу попробовать это!

var wrapper = document.getElementsByClassName('inner')[0];

$(document).ready(function() {
    
    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() * ($('.inner').width() - size)).toFixed();
      var posy = (Math.random() * ($('.inner').height() - 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;
  clip-path: url("#clipping");
}

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

.inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.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="http://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>

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

<div class="hexagon_wrapper">
  <div class="inner">
  </div>
</div>

Желаемый эффект довольно близок. Моя конечная игра заключается в следующем. Изображение для справки