Svg - simple button

by Phineusadrasteia

HTML

<div id="my_button"></div>

CSS

#my_button {width: 70px; height: 50px;}

JavaScript

var paper = Raphael(document.getElementById('my_button'), 70, 50);

var back_button = paper.path([
            'M', 0, 50, 
            'C', 5, 3, 65, 3, 70, 50,
            'z'
           ]).attr({
              fill:"red",
              "stroke-width": 0,
              cursor: "pointer"
           });

var tick_one = paper.path([
            "M", 28, 32,
            "c", 7, -12, 6, -12, 14, 0,
            "t", -7, -12, 
            "z"          
           ]);

var tick_two = paper.path([
           "M", 28, 45,
            "c", 7, -12, 6, -12, 14, 0,
            "t", -7, -12,
            "z"
           ]);

//create a group
var group = paper.set();
group.push(tick_two, tick_one);
group.attr({
    "stroke-linejoin": "round",
    "stroke-width":3,
    stroke: "white",
    fill: "white",
    cursor: "pointer"
});

var group2 = paper.set();
group2.push(tick_one, tick_two, back_button);

//add click event
var state = true;

group2.click(function() {
  if (state) {  
      tick_one.animate({
          path: [
              "M", 28, 24,
              "c", 7, 12, 6, 12, 14, 0,
              "t", -7, 12, 
              "z"    
          ] 
      }, 200);  
     tick_two.animate({
      path: [
            "M", 28, 32,
            "c", 7, 12, 6, 12, 14, 0,
            "t", -7, 12,
            "z" 
      ]
    }, 800);  
    return state = false;    
  } else {  
    tick_one.animate({
      path: [
            "M", 28, 34,
            "c", 7, -12, 6, -12, 14, 0,
            "t", -7, -12, 
            "z" 
      ] 
    }, 200);
    
    tick_two.animate({
      path: [
            "M", 28, 45,
            "c", 7, -12, 6, -12, 14, 0,
            "t", -7, -12,
            "z"
      ]
    }, 800);    
    return state = true;
  }
});