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