sexyhexy | neonHexagonsWeekend

/*Downloaded from https://www.codeseek.co/pixelass/sexyhexy-orandxa0neonhexagonsweekend-yNRxRa */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #fafafa;
  color: black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

label {
  display: block;
  margin: 1em 0;
}

canvas {
  background: #000;
}

input[type='range'] {
  align-self: center;
  border: solid 0 transparent;
  border-width: 0 0.75em;
  padding: 0;
  width: 16.125em;
  height: 0.9em;
  background: none;
  font-size: 1em;
  cursor: pointer;
  overflow: visible;
  color: #000;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 16.125em;
  height: 0.3em;
  background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
  background-size: 16.125em 0.3em;
}
input[type='range']::-moz-range-track {
  width: 16.125em;
  height: 0.3em;
  background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
  background-size: 16.125em 0.3em;
}
input[type='range']::-ms-track {
  margin-left: 0.375em;
  border: none;
  width: 16.125em;
  height: 0.3em;
  background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
  background-size: 16em 0.3em;
  color: transparent;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  margin-top: -0.225em;
  border: none;
  border-radius: 50%;
  background: currentColor;
  width: 0.75em;
  height: 0.75em;
}
input[type='range']::-moz-range-thumb {
  border: none;
  border-radius: 50%;
  background: currentColor;
  width: 0.125em;
  height: 0.125em;
}
input[type='range']::-ms-thumb {
  border: none;
  border-radius: 50%;
  background: currentColor;
  width: 0.75em;
  height: 0.75em;
}
input[type='range']::-ms-tooltip {
  display: none;
}
input[type='range']:focus {
  outline: none;
}

/* Chrome/ Opera */
input[type='range']:not(*:root) {
  width: 16.75em;
}

/* IE */
_:-ms-input-placeholder, :root input[type='range'] {
  width: 16.75em;
}

/*Downloaded from https://www.codeseek.co/pixelass/sexyhexy-orandxa0neonhexagonsweekend-yNRxRa */
/**
 * map Math to window to have easier access
 */
Object.getOwnPropertyNames(Math).map(function (prop) {
  window[prop] = Math[prop];
});

/**
 * convert degree to radians
 * @param  {Number} degree degree to convert
 * @return {Number}        returns radians
 */
var rad = function rad(degree) {
  return degree * PI / 180;
};

/**
 * convert radians to degree
 * @param  {Number} radians radians to convert
 * @return {Number}          returns degree
 */
var deg = function deg(radians) {
  return radians * 180 / PI;
};

var size = 100;
var speed = document.getElementById('speed');
var speedVal = parseFloat(speed.value);
//console.log('\npentagonArea', pentagonArea, '\ndodecahedronArea', dodecahedronArea, '\nangle', deg(angle), '\napothem', apothem, '\ninradius',inradius,'\ncircumradius',circumradius,'\nvolume',volume)
speed.addEventListener('change', function () {
  speedVal = parseFloat(speed.value);
});
var c = document.getElementById('c');
var $ = c.getContext('2d');
$.scale(2, 2);

var canvasSize = 1000;
c.height = canvasSize;
c.width = canvasSize;
c.style.height = canvasSize / 2 + 'px';
c.style.width = canvasSize / 2 + 'px';
var count = 0;
var vertices = 6;
var draw = function draw() {
  //$.fillStyle =' rgba(0,0,0,.02)';
  // $.fillRect(0,0,canvasSize,canvasSize); 
  $.lineWidth = 4;
  $.lineCap = 'round';
  count++;
  $.globalAlpha = 0.5;
  $.fillStyle = ' rgba(0,0,0,0.1)';

  var kk = sin(rad(count / speedVal));
  $.strokeStyle = 'hsla(' + count + ',100%,50%,0.1)';

  for (var j = 0; j < vertices; j++) {
    $.beginPath();
    for (var i = 0; i < vertices; i++) {
      var x = cos(rad(360 / vertices * (i + 0.5) + count)) * size + canvasSize / 2 + cos(rad(360 / vertices * (j + 0.5))) * sqrt(3) * size * kk;
      var y = sin(rad(360 / vertices * (i + 0.5) + count)) * size + canvasSize / 2 + sin(rad(360 / vertices * (j + 0.5))) * sqrt(3) * size * kk;
      $.lineTo(x, y);
    }
    $.closePath();
    $.stroke();
    $.fill();
  }
  requestAnimationFrame(draw);
};

draw();