Hexes

by Laura Kishimoto

HTML

<div class="afghan">
</div>

SCSS

$side       : 20px;
$colour1    : cadetblue;
$colour2    : teal;

body {
    background: #eee;
    text-align: center;
}

.afghan {
    padding: 0 $side/2;
    margin: calc(-1.732*$side/2) auto;
    overflow-y: hidden;
    line-height: calc(0.545*$side);
}

.pair {
    display: inline-block;
    white-space: nowrap;
}

.hex {
    display: inline-block;
    position: relative;
    left: $side/4;
    width: $side;
    height: calc(1.732*$side);
    margin-right: $side/2;
    background: $colour1;
    &:before, &:after {
        position: absolute;
        border: 1px solid transparent;
        border-width: calc(1.732*$side/2) $side/2;
        content: "";
    }
    &:before {
        right: $side;
        border-right-color: $colour1;
    }
    &:after {
        left: $side;
        border-left-color: $colour1;
    }
    &:nth-of-type(2n) {
        top: calc(1.732*$side/2);
    }
    &:nth-of-type(2n) {
        background: $colour2;
        &:before {
            border-right-color: $colour2;
        }
        &:after {
            border-left-color: $colour2;
        }
    }
}

JavaScript

var hexes = 609;
var html = [];

// round to the nearest 4
hexes = 4 * Math.round(hexes/4);

for (var i = 0; i < hexes/2; i++) {
    html[i] = '<div class="pair">' + 
        '<div class="hex"></div>' +
        '<div class="hex"></div>\n' +
        '</div>';
}

$('.afghan').append(html.join(''));