CodePen Embed - CSS Honeycomb III

<div class="cursor"></div>
<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>
<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>

<div class="row row-moved">
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
   <div class="hexagon"></div>
  <div class="hexagon"></div>
  <div class="hexagon"></div>
</div>


//******************************************************

// Like it if you like it :) Thank you 
// Best viewed in fullscreen
// https://codepen.io/nocni_sovac/full/BaKLwxZ

//******************************************************

body{
  background: #1b1d29;
  overflow: hidden;
 
}

.row {
    display:block;
    width: 100vw;
    height: 125px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -35px;
    margin-left: -33px;
  
  .hexagon {
  position: relative;
  width: 100px; 
  height: 57.74px;
  background-color: #2b2b2b;
  margin: 32.87px 2px;
  display: block;
  transition: all .2s linear;
  
  &::after{
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
    top: 100%;
  width: 0;
  border-top: 28.87px solid #2b2b2b;
    transition: all .2s linear;
  }
  
  &::before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
      bottom: 100%;
  border-bottom: 28.87px solid #2b2b2b;
   transition: all .2s linear;
  }
    
//     &:hover {
//        background: #3fff3c;
//       &::after{
//        border-top: 28.87px solid #3fff3c;
//       }
//       &::before{
//        border-bottom: 28.87px solid #3fff3c;
//       }
      
//     }
  
}

  
  &.row-moved {
         margin-left: 19px;
   
  }
}


.cursor {
  width:350px;
  height:350px;
  border-radius:100%;
  position: absolute;
  box-shadow: 2px -3px 41px -1px rgba(241,196,15,0.64);
  z-index: 0;
  opacity: 0;
  background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
   background-size: 400%;
  animation: glower 20s linear infinite;
  filter: blur(40px);
  
//    &::before {
//     content: '';
//     position: absolute;
//     top: -2px;
//     left: -2px;
//     right: -2px;
//     bottom: -2px;
//     background: white;
//     z-index: -1;
//       border-radius:100%;

// background: linear-gradient(45deg, rgba(255,5,172,1) 0%, rgba(255,5,172,1) 18%, rgba(0,255,255,1) 100%); /* w3c */
//   }
  
//   &::after {
//     content: '';
//     position: absolute;
//     top: -2px;
//     left: -2px;
//     right: -2px;
//     bottom: -2px;
//     background: white;
//     z-index: -2;
//     filter: blur(40px);
//     background: linear-gradient(45deg, rgba(255,5,172,1) 0%, rgba(255,5,172,1) 18%, rgba(0,255,255,1) 100%); /* w3c */
//      border-radius:100%;
//   }
  
  @keyframes glower {
  0% {
    background-position: 0 0;
  }
  
  50% {
    background-position: 400% 0;
  }
  
  100% {
    background-position: 0 0;
  }
}
  
}

View Compiled

let curs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  let x = e.pageX;
  let y = e.pageY;
  curs.style.left = (x - 175) + "px";
  curs.style.top = (y - 175) + "px";
  curs.style.opacity = "1"
});

This Pen is owned by Jam on CodePen. It is a fork of this Pen.

See more by @JamPhobia on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.