- // Simple dashed pattern on circle
var s = Snap("#svg");
- // This will be our shape. It could be anything.
var bigCircle = s.circle(150, 150, 100);
- bigCircle.attr({
stroke: "#000",
strokeWidth: 5
});
- // Now let's create pattern
var p = s.path("M110,95,95,110M115,100,100,115").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 4
});
- //This is where our pattern cut will happen:
var cut = s.rect(100, 100, 10, 10).attr({fill: "#fff", opacity: .5})
- cut.remove();
- //make it a pattern
var ptrn = p.pattern(100, 100, 10, 10);
//ptrn is an invisible <pattern> element.
- // Then use it as a fill on the big circle
bigCircle.attr({
fill: ptrn
});
- //We still have access to original path for the pattern, lets animate it a bit:
- p.animate({strokeWidth: 1, stroke: "#FF4136"}, 1e3);
//Note that pattern could have as many elements as you want