Pattern

pattern()

returns SVG.Pattern

Creating a pattern is very similar to creating gradients:

var pattern = draw.pattern(20, 20, function(add) {
  add.rect(20,20).fill('#f06')
  add.rect(10,10)
  add.rect(10,10).move(10,10)
})

This creates a checkered pattern of 20 x 20 pixels. You can add any available element to your pattern.

fill() as setter

returns value

Finally, to use the pattern on an element:

rect.attr({ fill: pattern })

Or:

rect.fill(pattern)

By passing the pattern instance as the fill on any element, the fill() method will be called on the pattern instance.

fill() as getter

returns value

pattern.fill() //-> returns 'url(#SvgjsPattern1234)'

update()

returns itself

A pattern can also be updated afterwards:

pattern.update(function(add) {
  add.circle(15).center(10,10)
})
Fork me on GitHub