From 8c5eb95c50b3098ad2e9aec7f5b3da87856cbf6b Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Wed, 21 May 2014 12:38:35 +1000 Subject: [PATCH] Two more design tutorials. --- demos/tutorial/3.html | 202 ++++++++++++++++++++++++++++++++++++++++++ demos/tutorial/4.html | 180 +++++++++++++++++++++++++++++++++++++ 2 files changed, 382 insertions(+) create mode 100644 demos/tutorial/3.html create mode 100644 demos/tutorial/4.html diff --git a/demos/tutorial/3.html b/demos/tutorial/3.html new file mode 100644 index 0000000..ebae735 --- /dev/null +++ b/demos/tutorial/3.html @@ -0,0 +1,202 @@ + + + + + Tutorial + + + + + + + + +
    +
  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. +
  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. +
  3. //----------------------------------------------------- +// Lets use it for stroke +var c2 = bigCircle.use(); +c2.attr({ + fill: "none", + stroke: "#000", + strokeWidth: 6 +});
    4. +
  4. // Lets create a masking circle
    5. +
  5. var ring = bigCircle.use(); +ring.attr({ + fill: "none", + stroke: "#000", + strokeWidth: 20 // we need only inner 10px of it +});
    6. +
  6. // Hide bigCircle by moving it to <defs> +bigCircle.toDefs();
    7. +
  7. var mask = s.mask();
    8. +
  8. // Background rect: +mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));
    9. +
  9. // and our ring +mask.add(ring);
    10. +
  10. c1.attr({ + mask: mask +});
    11. +
  11. //Now, let’s animate bigCircle:
    12. +
  12. bigCircle.animate({r: 50}, 5e3, mina.elastic); +// Despite bigCircle is not visible it affect all 3 “uses” of it.
    13. + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/demos/tutorial/4.html b/demos/tutorial/4.html new file mode 100644 index 0000000..fababe3 --- /dev/null +++ b/demos/tutorial/4.html @@ -0,0 +1,180 @@ + + + + + Tutorial + + + + + + + + +
    +
  1. // Text on the path +var s = Snap("#svg");
    2. +
  2. // Setting the background +var bg = s.rect(50, 50, 200, 200, 10).attr({fill: "#ccc"});
    3. +
  3. var t = s.text(150, 150, "Test Text").attr({ + font: "30px Helvetica, sans-serif", + textAnchor: "middle", + fill: "#ddd" +});
    4. +
  4. // Lets create a mask
    5. +
  5. var t2 = t.use().attr({ + stroke: "#000", + strokeWidth: 10, + strokeLinecap: "round", + strokeLinejoin: "round" +}); +
    6. +
  6. var mask = s.mask();
    7. +
  7. // Background rect: +mask.add(s.rect(0, 0, "100%", "100%").attr({fill: "#fff"}));
    8. +
  8. // and our ring +mask.add(t2);
    9. +
  9. bg.attr({ + mask: mask +});
    10. +
  10. //Now, let’s animate:
    11. +
  11. t2.animate({strokeWidth: 4}, 5e3, mina.bounce);
    12. + +
+ +
+ + + + + + + \ No newline at end of file