Global

Methods

hexagon(side, xopt, yopt) → {function}

Create an SVG hexagon (6-sided polygon)
Source:
Parameters:
Name Type Attributes Default Description
side number Length of hexagon side in pixels
x number <optional>
 0 Initial x position of hexagon
y number <optional>
 0 Initial y position of hexagon
Returns:
Type:
function
SVG polygon
Example

Create a hexagon

let paper = Snap('svg');
let height = 500;
let width = 500;
paper.attr({height, width});
let side = 50;
let position = [100, 100];
let hexagon = paper.hexagon(side, ...position);

hexagonalButton(options) → {function}

Create a hexagonally-shaped bar SVG. Used internally by hexagonalMenu
Source:
Parameters:
Name Type Description
options object Options to configure hexagonalButton
Name Type Attributes Default Description
sideLength number Length of hexagonal side in pixels
x number <optional>
 0 x position
y number <optional>
 0 y position
width number Bar width (in pixels)
level number Level of nesting
title string Title text
subtitle string Sub-title text
Returns:
Type:
function
hexagonal SVG button

hexagonalMenu(items, options) → {function}

Create a vertical menu with animations and events
Source:
Parameters:
Name Type Description
items Array.<object> Menu items
options object Options to configure
Name Type Attributes Default Description
sideLength number Length of hexagonal side in pixels
width number Item width
duration number <optional>
 100 Duration for hide and show animations (in milliseconds)
Returns:
Type:
function
hexagonalMenu
Examples

Create a menu

let paper = Snap('svg');
let height = '100%';
let width = '100%';
paper.attr({height, width});
let options = {
    sideLength: 30,
    width: 210
};
let items = [
    {title: 'FRUITS', submenu: [
        {title: 'Apple'},
        {title: 'Pear'},
        {title: 'Banana'}
    ]},
    {title: 'VEGETABLES', submenu: [
        {title: 'Broccoli'},
        {title: 'Carrot'},
        {title: 'Spinach'}
    ]},
    {title: 'MEATS', submenu: [
        {title: 'Chicken'},
        {title: 'Beef'},
        {title: 'Pork', subtitle: 'The other white meat'}
    ]}
];
let menu = paper.hexagonalMenu(items, options);

Add event listeners to the menu

menu.on('before:show', e => {
    //triggered before show animation
});
menu.on('show', e => {
    //triggered after show animation is complete
});
menu.on('before:hide', e => {
    //triggered before hide animation starts
});
menu.on('hide', e => {
    //triggered after hide animation is complete
});
menu.on('before:reset', e => {
    //triggered before reset animation starts
});
menu.on('reset', e => {
    //triggered after reset animation is complete
});

Add event listeners to buttons

//All event names with numbers are the zero-indexed numbers of the associated buttons
menu.on('click:0', e => {
    //triggered when the 'FRUITS' button is clicked
});
//Access passed event options via e.detail
menu.on('click:child', e => {
    //triggered when any child item is clicked
    console.log(e.detail.target.title.attr('text'));
});
menu.on('click:2:child', e => {
    //triggered when any child of 'MEATS' is clicked
});
menu.on('click:1:0', e => {
    //triggered when 'Broccoli' is clicked
});