Pergola shapes

A shape object defines an SVG element and its geometrical attributes only. No paint attributes or style. Some classes are enabled to process the instance property shape (use cases in the buttons example). You can also use a shape directly by invoking the utility function pergola.use which simulates the SVG <use> element. Because only the geometry is defined for shapes, you have total control over stroke width/scaling. A shape object definition:

hexagon: {
  element: "polygon",
  geometry: {
    points: "8,27.713 0,13.856 8,0 24,0 32,13.856 24,27.713"
  }
}

View as standalone SVG

pergola.use({
  parent : g,
  shape : pergola.shapes.triangle,
  attributes : {
    transform : "rotate(12 32 27.7128) translate(316 -62) scale(3)",
    fill : "#FFFFC0",
    stroke : "gray",
    "stroke-width" : 2,
    "stroke-linejoin" : "round"
  }
});

pergola.use({
  parent : g,
  shape : pergola.shapes.triangle,
  attributes : {
    transform : "translate(320 -.5) scale(3) skewX(42)",
    fill : "#FFFFC0",
    stroke : "black",
    "stroke-width" : .25
  }
});

Shapes