// 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);
//-----------------------------------------------------
// 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
});
//-----------------------------------------------------
// Lets use it for stroke
var c2 = bigCircle.use();
c2.attr({
fill: "none",
stroke: "#000",
strokeWidth: 6
});
// Lets create a masking circle
var ring = bigCircle.use();
ring.attr({
fill: "none",
stroke: "#000",
strokeWidth: 20 // we need only inner 10px of it
});
// Hide bigCircle by moving it to <defs>
bigCircle.toDefs();