Honeycomb

honeycomb.markdown

Honeycomb

A Pen by Saph on CodePen.

License.

index.html

<div id="hive">
  <div class="honeycomb"></div>
</div>

<!-- dynamic width doesnt work every other time -->

script.js

/* shamelessly stolen from https://codepen.io/ddietle/pen/WxVaOq */

$(document).ready(function () {
  honey();
});

function honey() {
  var hexWidth = 80;
  
  var arr = [2, 2, 2, 2, 3, 5, 5, 6, 8, 8, 9, 11, 11, 12, 14, 14, 15, 17, 17, 18, 20, 20, 21, 23, 23, 25, 27, 27, 29, 31, 31, 33];

  var h = Math.ceil($(document).outerHeight() / hexWidth);
  var w = arr[Math.ceil($(document).outerWidth() / hexWidth) + 1];

  var cnt = ((h * (1.5 + ((h / w) * 1.5))) * w);
  $('#hive').css({ 'height': (h * 80) + 'px', 'width': (w * 80) + 'px' });
  for (var i = 0; i < cnt; i++) {
    var hex = $('.honeycomb').first().clone();
    $('#hive').append(hex);
  }

  $('.honeycomb').click(function () {
    document.title = $(this).attr('i');
  });
}

// var honeycomb = '<div class="honeycomb"></div>';
// console.log(honeycomb)
// function hive(){
//   var count = 40;
//   for (var i = 0; i < count; i++){
//     $(honeycomb).appendTo("#hive").attr("i", i);
//     //  if (i % 10 == 0) {
//     //    $(honeycomb).appendTo("#hive").attr("i", i);
//     //   $(honeycomb).each(function( i ) {
//     //     $(honeycomb).addClass("i")
//     //   });
//     // };
//   }
// }

// hive();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

body{
  margin: 0;
}

#hive{
  margin: -40px 0 0 -40px;
  width: 1500px !important; /* dirty hack */
  height: 500px;
  overflow: hidden;
}
.border{
  border-top: 2px solid yellow;
  border-bottom: 2px solid yellow;
}
.size{
  height: 76px;
  width: 46px;
}

body{
  background: #000;
}

.honeycomb{
  @extend .border;
  @extend .size;
  display: block;
  float: left;
  margin: 0 10px;
  position: relative;
  transition: all, 0.2s, ease;
  cursor: pointer;
  
  &:before{
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    @extend .size;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    @extend .border;
    transition: all, 0.2s, ease;
  }
  &:after{
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    @extend .size;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    @extend .border;
    transition: all, 0.2s, ease;
  }
  
  &:hover, &:hover:before, &:hover:after{
      box-shadow: inset 0px 10px 0px #d8d864, inset 0px -10px 0px #d8d864;
  }
  
  &:nth-of-type(even){
    top: 40px;
  }
}