PERGOLA LOGO

Patterns

Pattern definitions are functions – properties of the pergola.pattern object – which create a pattern with a default set of properties. The function returns the URL string. You assign the call to the fill and/or stroke properties of an element. You can pass parameters to override the predefined properties. All pattern definitions have the properties colors, width, height, opacity, transform, id, and some also have size, spacing and "stroke-width", as applicable. The pattern gets a unique ID based on the function name + values, and is created and appended to the defs if it does not exist. For a pattern that you plan to reuse it's convenient to reference it first and then assign the reference to the fill and/or stroke properties of those elements that need to use that pattern: var myPattern = pergola.pattern.catseye({colors: ["#3050A0", "#4060B0"], transform: "scale(3)"});. In the examples below, each row generally shows six variations on the same definition. Note that only IE9 seems to apply transformations correctly, scaling in particular. Opera, Firefox and Webkit seem to convert the tile to bitmap before applying transformations and then re-sample based on transformation values.

View as standalone SVG

catseye #1
$C({
  element: "rect",
  width: 90,
  height: 90,
  fill: pergola.pattern.catseye(),
  appendTo: g
});
pirelli #6
$C({
  element: "rect",
  x: 600,
  width: 90,
  height: 90,
  fill: pergola.pattern.pirelli({
    colors: ["url(#sliderPatternGrad)", "gainsboro"],
    transform: "scale(2 6) rotate(45)"
  }),
  appendTo: g
});
bar #5

  ...
  pergola.pattern.bar({
    colors: ["none", "url(#fade_redGradient)"],
    size: 40,
    spacing: 0,
    transform: "rotate(45)"
  }),
  ...
checkers #2

  ...
  fill: pergola.pattern.checkers({
    colors: ["seagreen", "white"],
    transform: "scale(.25) skewX(20)"
  }),
  ...
hive #3

  ...
  fill: pergola.pattern.hive({
    colors: ["darkred", "#6E5A5A"],
    "stroke-width": 2,
    transform: "scale(1.5 .75) rotate(45)"
  }),
  ...
ring #5

  ...
  fill: pergola.pattern.ring({
    colors: ["#000000", "yellowgreen", "gold"],
    spacing: 14,
    size: 14,
    "stroke-width": 11,
    opacity: .5,
    transform: "rotate(-45)"
  }),
  ...