Demo 1

Masking and Animating With Snap.svg

Masking and Animating With Snap.svg

1

Download Snap.svg

2

Take a look at API documentation.

3

In your HTML file, load simply by:

 
                    <script src="snap.svg-min.js"></script> 
                

4

You should have something like this:

 
                    <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <title>Introducing Snap.svg</title>
                            <script src="js/snap.svg.js"></script>
                            <script src="js/main.js"></script>
                        </head>
                        <body>
                            <svg id="svg"></svg>
                        </body>
                        </html> 
                

5

You can initialise Snap, pointing to the "svg" just created and assign it to a variable. In our case the variable is called "s":

                    var s = Snap("#svg"); 
                

6

From now on, within the s variable we'll have access to all Snap.svg methods. For example, let's say that we want to create a circle. Circle can take three arguments x,y and radius (check Circle API):

                    // Circle with 80px radius
                    var circle = s.circle(90,90,80); 
                

7

Let's interact with them and add some more styling attributes, like fill color, fill opacity, stroke color, stroke width, stroke opacity. You can check SVG Attributes:

                    circle.attr({
                      fill: '#06A882',
                      fillOpacity: .8,
                      stroke: '#B0B0BA',
                      strokeOpacity: .8,
                      strokeWidth: 10
                    });
                

Example 1:

8

Snap.svg uses a powerful weapon called group, which, as the name suggests, groups vectors together, making them one shape. Let's create two circles, group them and lower the fill of each circle to visualise more clearly what's going on:

                    var s = Snap("#svg");

                    var circle_1 = s.circle(90, 90, 80);
                    var circle_2 = s.circle(90, 90, 90);
                     
                    var eye = s.group(circle_1, circle_2);

                    var square = s.rect(78,36,20,110);

                    eye.attr({
                      fill: '#06A882',
                      fillOpacity: .8,
                      stroke: '#B0B0BA',
                      strokeOpacity: .8,
                      strokeWidth: 10
                    });

                    square.attr({
                      fill: '#434958',
                      fillOpacity: 1
                    });
                

Example 2:

9

Let's now say that we want to create an imaginary eye using the grouped elements we've already made. We can do so using mask. Create extra elements and place them in the middle of the group:

                    var s = Snap("#svg");

                    var circle_1 = s.circle(90, 90, 80);
                    var circle_2 = s.circle(90, 90, 90); 

                    var eye = s.group(circle_1, circle_2);

                    var square = s.rect(78,36,20,110);

                    var maskOne = s.ellipse(92, 90, 160, 160);
                    var maskTwo = s.ellipse(92, 90, 160, 160);

                    eye.attr({
                      fill: '#06A882',
                      fillOpacity: 1,
                      stroke: '#B0B0BA',
                      strokeOpacity: .8,
                      strokeWidth: 10
                    });

                    square.attr({
                      fill: '#434958',
                      fillOpacity: 1
                    });

                    maskOne.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });

                    maskTwo.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });
                

10

Mask the circles and rectangle with our ellipses:

                    eye.attr({
                      fill: '#06A882',
                      fillOpacity: 1,
                      stroke: '#B0B0BA',
                      strokeOpacity: .8,
                      strokeWidth: 10,
                      mask: maskOne
                    });

                    square.attr({
                      fill: '#434958',
                      fillOpacity: 1,
                      mask: maskTwo
                    });

                    maskOne.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });

                    maskTwo.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });
                

11

Make this eye "blink", by adding an animate method. Create the animation and wrap it inside a function called blink:

                    function blink(){
                      maskOne.animate({ry:1}, 220, function(){
                        maskOne.animate({ry: 100}, 300);
                      });
                      maskTwo.animate({ry:1}, 220, function(){
                        maskTwo.animate({ry: 100}, 300);
                      });
                    };
                

12

Create a setInterval to call the blink method once every three seconds, in order to create a blinking effect:

                    setInterval(blink, 3000);
                

13

Final code should look like this:

                    var s = Snap("#svg");

                    var circle_1 = s.circle(90, 90, 80);
                    var circle_2 = s.circle(90, 90, 90);
                     
                    // Group circles together
                     
                    var eye = s.group(circle_1, circle_2);

                    // Add rectangle and mask elements

                    var square = sThree.rect(78,36,20,110);

                    var maskOne = sThree.ellipse(92, 90, 160, 160);
                    var maskTwo = sThree.ellipse(92, 90, 160, 160);
                     
                    // Add fill color and opacity to circle and rectangle and apply
                    // the mask
                    eye.attr({
                      fill: '#06A882',
                      fillOpacity: 1,
                      stroke: '#B0B0BA',
                      strokeOpacity: .8,
                      strokeWidth: 10,
                      mask: maskOne
                    });

                    square.attr({
                      fill: '#434958',
                      fillOpacity: 1,
                      mask: maskTwo
                    });

                    maskOne.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });

                    maskTwo.attr({
                      fill: '#FFF',
                      fillOpacity: 1,
                      opacity: 1
                    });
                     
                    // Create a blink effect by modifying the rx value
                    // for ellipse from 90px to 1px and backwards
                     
                    function blink(){
                      maskOne.animate({ry:1}, 220, function(){
                        maskOne.animate({ry: 100}, 300);
                      });
                      maskTwo.animate({ry:1}, 220, function(){
                        maskTwo.animate({ry: 100}, 300);
                      });
                    };
                     
                    // Recall blink method once every 3 seconds
                     
                    setInterval(blink, 3000);
                

Example 3: