Hex Grid

---

Html

JavaScript

/* Options */
var options = {
  // Space between 2 hex nodes.
  space: 5,
  // Radius.
  radius: 30,
  // Border width. Min = 1. To show no border, set the border color to transparent.
  border: 1
}

/* Constructor */
var hexGrid = new zeu.HexGrid('hex-grid', options);

/* Function */
// Create or update a hex node.
hexGrid.saveHex({
  // Unique node id.
  id: 'node-1',
  // X coordinate on canvas.
  x: 0,
  // Y coordinate on canvas.
  y: 0,
  // Background color.
  bgColor: '#00d7af',
  // Border color.
  borderColor: '#FFFFFF',
  // Text settings
  text: {
    // Display value.
    value: 'ZEU',
    // Font color.
    color: '#FFFFFF',
    // Canvas font style. For instance, '12px Arial'. 
    font: '16px Arial',
    // X offset from the center of the node.
    xOffset: 0,
    // Y offset from the center of the node.
    yOffset: 5
  }
});

// Turn on blinking.
hexGrid.blinkOn({
  // Node id.
  id: 'node-1',
  // Change text settings.
  text: {
    // Display value.
    value: 'YEAH',
    // Font color.
    color: '#FFFFFF'
  },
  // Change background color.
  bgColor: '#dc3547',
  // Change border color.
  borderColor: '#FFFFFF',
  // Set blink interval.
  interval: 1000
});

// Turn off blinking by node id.
hexGrid.blinkOff('node-1');

More examples

Increase canvas size to 600 x 600. Blink 900 nodes in random color and interval.