diff --git a/demos/tutorial/1.html b/demos/tutorial/1.html new file mode 100644 index 0000000..31a534c --- /dev/null +++ b/demos/tutorial/1.html @@ -0,0 +1,180 @@ + + + + + Tutorial + + + + + + + + +
    +
  1. // Simple dashed pattern on circle +var s = Snap("#svg");
    2. +
  2. // This will be our shape. It could be anything. +var bigCircle = s.circle(150, 150, 100);
    3. +
  3. bigCircle.attr({ + stroke: "#000", + strokeWidth: 5 +});
    4. +
  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. +
  5. //This is where our pattern cut will happen: +var cut = s.rect(100, 100, 10, 10).attr({fill: "#fff", opacity: .5})
    6. +
  6. cut.remove();
    7. +
  7. //make it a pattern +var ptrn = p.pattern(100, 100, 10, 10); +//ptrn is an invisible <pattern> element.
    8. +
  8. // Then use it as a fill on the big circle +bigCircle.attr({ + fill: ptrn +});
    9. +
  9. //We still have access to original path for the pattern, lets animate it a bit:
    10. +
  10. p.animate({strokeWidth: 1, stroke: "#FF4136"}, 1e3); +//Note that pattern could have as many elements as you want
    11. +
+ +
+ + + + + + + \ No newline at end of file diff --git a/demos/tutorial/2.html b/demos/tutorial/2.html new file mode 100644 index 0000000..a0c1ed4 --- /dev/null +++ b/demos/tutorial/2.html @@ -0,0 +1,194 @@ + + + + + Tutorial + + + + + + + + +
    +
  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. +
  2. //Lets create a masking circle
    3. +
  3. var ring = s.circle(150, 150, 92).attr({ + fill: "none", + stroke: "#fff", + strokeWidth: 10 +});
    4. +
  4. //This looks correct, but only because our background is white
    5. +
  5. s.rect(0, 150, 300, 30).attr({fill: "#85144B"}).insertBefore(bigCircle); +//Uh-oh, lets try to apply this ring as a mask:
    6. +
  6. bigCircle.attr({ + mask: ring +});
    7. +
  7. //Not exactly what we want. We need to invert the mask
    8. +
  8. var mask = s.mask();
    9. +
  9. // Background rect: +mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));
    10. +
  10. // and our ring, but black +mask.add(ring.attr({stroke: "#000"}));
    11. +
  11. bigCircle.attr({ + mask: mask +});
    12. +
  12. //Now, let’s animate the ring:
    13. +
  13. ring.animate({r: 10}, 1e3);
    14. + +
+ +
+ + + + + + + \ No newline at end of file