1. // Simple dashed pattern on circle with mask // Lets connect mask and circle together. Also useful if we have a path // and can’t calculate offset easily. var s = Snap("#svg"); // So, lets start with an empty circle. // It’s important that it will not have any attributes set var bigCircle = s.circle(150, 150, 100);
2. //----------------------------------------------------- // Lets use it again for patterned fill var c1 = bigCircle.use(); // Create pattern 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); // and apply some nice attributes c1.attr({ fill: ptrn });
3. //----------------------------------------------------- // Lets use it for stroke var c2 = bigCircle.use(); c2.attr({ fill: "none", stroke: "#000", strokeWidth: 6 });
4. // Lets create a masking circle
5. var ring = bigCircle.use(); ring.attr({ fill: "none", stroke: "#000", strokeWidth: 20 // we need only inner 10px of it });
6. // Hide bigCircle by moving it to <defs> bigCircle.toDefs();
7. var mask = s.mask();
8. // Background rect: mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));
9. // and our ring mask.add(ring);
10. c1.attr({ mask: mask });
11. //Now, let’s animate bigCircle:
12. bigCircle.animate({r: 50}, 5e3, mina.elastic); // Despite bigCircle is not visible it affect all 3 “uses” of it.