Raphael.js Example to Animate SVG Vector Graphics Shapes in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be looking at raphael.js library to animate svg vector graphics shapes in browser using vanilla javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

index.html

 

 

<html>
  <body>
        <p>Drag shapes around.</p>
        <div id="holder"></div>
        <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
    </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
</html>

 

 

style.css

 

 

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}



#holder {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border: solid 1px #333;
            }
            p {
                text-align: center;
            }

 

 

script.js

 

 

(function() {
  var el;

  Raphael.fn.connection = function(obj1, obj2, line, bg) {
    var bb1, bb2, color, d, dis, dx, dy, i, j, p, path, res, x1, x2, x3, x4, y1, y2, y3, y4;
    if (obj1.line && obj1.from && obj1.to) {
      line = obj1;
      obj1 = line.from;
      obj2 = line.to;
    }
    bb1 = obj1.getBBox();
    bb2 = obj2.getBBox();
    p = [
      {
        x: bb1.x + bb1.width / 2,
        y: bb1.y - 1
      }, {
        x: bb1.x + bb1.width / 2,
        y: bb1.y + bb1.height + 1
      }, {
        x: bb1.x - 1,
        y: bb1.y + bb1.height / 2
      }, {
        x: bb1.x + bb1.width + 1,
        y: bb1.y + bb1.height / 2
      }, {
        x: bb2.x + bb2.width / 2,
        y: bb2.y - 1
      }, {
        x: bb2.x + bb2.width / 2,
        y: bb2.y + bb2.height + 1
      }, {
        x: bb2.x - 1,
        y: bb2.y + bb2.height / 2
      }, {
        x: bb2.x + bb2.width + 1,
        y: bb2.y + bb2.height / 2
      }
    ];
    d = {};
    dis = [];
    i = 0;
    while (i < 4) {
      j = 4;
      while (j < 8) {
        dx = Math.abs(p[i].x - p[j].x);
        dy = Math.abs(p[i].y - p[j].y);
        if ((i === j - 4) || (((i !== 3 && j !== 6) || p[i].x < p[j].x) && ((i !== 2 && j !== 7) || p[i].x > p[j].x) && ((i !== 0 && j !== 5) || p[i].y > p[j].y) && ((i !== 1 && j !== 4) || p[i].y < p[j].y))) {
          dis.push(dx + dy);
          d[dis[dis.length - 1]] = [i, j];
        }
        j++;
      }
      i++;
    }
    if (dis.length === 0) {
      res = [0, 4];
    } else {
      res = d[Math.min.apply(Math, dis)];
    }
    x1 = p[res[0]].x;
    y1 = p[res[0]].y;
    x4 = p[res[1]].x;
    y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3);
    y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3);
    x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3);
    y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
    if (line && line.line) {
      line.bg && line.bg.attr({
        path: path
      });
      return line.line.attr({
        path: path
      });
    } else {
      color = (typeof line === "string" ? line : "#000");
      return {
        bg: bg && bg.split && this.path(path).attr({
          stroke: bg.split("|")[0],
          fill: "none",
          "stroke-width": bg.split("|")[1] || 3
        }),
        line: this.path(path).attr({
          stroke: color,
          fill: "none"
        }),
        from: obj1,
        to: obj2
      };
    }
  };

  el = void 0;

  window.onload = function() {
    var color, connections, dragger, i, ii, move, r, shapes, up;
    dragger = function() {
      this.ox = (this.type === "rect" ? this.attr("x") : this.attr("cx"));
      this.oy = (this.type === "rect" ? this.attr("y") : this.attr("cy"));
      return this.animate({
        "fill-opacity": .2
      }, 500);
    };
    move = function(dx, dy) {
      att;
      var att, i;
      if (this.type === "rect") {
        att = {
          x: this.ox + dx,
          y: this.oy + dy
        };
      } else {
        att = {
          cx: this.ox + dx,
          cy: this.oy + dy
        };
      }
      this.attr(att);
      i = connections.length;
      while (i--) {
        r.connection(connections[i]);
      }
      return r.safari();
    };
    up = function() {
      return this.animate({
        "fill-opacity": 0
      }, 500);
    };
    r = Raphael("holder", 1000, 700);
    connections = [];
    shapes = [r.ellipse(190, 100, 30, 20), r.rect(290, 80, 60, 40, 10), r.rect(290, 180, 60, 40, 2), r.ellipse(450, 100, 20, 20)];
    i = 0;
    ii = shapes.length;
    while (i < ii) {
      color = Raphael.getColor();
      shapes[i].attr({
        fill: color,
        stroke: color,
        "fill-opacity": 0,
        "stroke-width": 2,
        cursor: "move"
      });
      shapes[i].drag(move, dragger, up);
      i++;
    }
    connections.push(r.connection(shapes[0], shapes[1], "#fff"));
    connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff|5"));
    return connections.push(r.connection(shapes[1], shapes[3], "#000", "#fff"));
  };

}).call(this);

Leave a Reply