1. // Simple dashed pattern on circle with mask var s = Snap("#svg"); var bigCircle = s.circle(150, 150, 100).attr({ fill: "#bada55", stroke: "#000", strokeWidth: 6 }); var p = s.path("M110,95,95,110M115,100,100,115").attr({ fill: "none", stroke: "#bada55", strokeWidth: 4 }); var ptrn = p.pattern(100, 100, 10, 10); bigCircle.attr({ fill: ptrn }); //Here is our circle from the first Snap-bit.
2. //Lets create a masking circle
3. var ring = s.circle(150, 150, 92).attr({ fill: "none", stroke: "#fff", strokeWidth: 10 });
4. //This looks correct, but only because our background is white
5. s.rect(0, 150, 300, 30).attr({fill: "#85144B"}).insertBefore(bigCircle); //Uh-oh, lets try to apply this ring as a mask:
6. bigCircle.attr({ mask: ring });
7. //Not exactly what we want. We need to invert the mask
8. var mask = s.mask();
9. // Background rect: mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));
10. // and our ring, but black mask.add(ring.attr({stroke: "#000"}));
11. bigCircle.attr({ mask: mask });
12. //Now, let’s animate the ring:
13. ring.animate({r: 10}, 1e3);