面具/夹子路径带孩子的Div？

Question

所以我有这个小提琴https://jsfiddle.net/OMGDrAcutla/24kbw8mq/1/

所需效果非常接近。我的最终游戏就是这个。 Image for Reference

似乎SVG clipPath无效。我想要做的是根据参考图像将div限制为六边形的形状。我无法确定我的小提琴可能出现的问题。

有没有更简单的方法来实现这种效果？只是在Illustrator中制作六边形并使用z-index覆盖它是一种更简单的方法吗？

结束游戏我可以处理没有夫妻外围六边形，但想尽可能多地模仿图像。

非常感谢任何帮助。我很亲密，我可以品尝它！

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>

所需效果非常接近。我的最终游戏就是这个。 Image for Reference