Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
    <!doctype html>
    <html>
        <head>
            <title>Editor</title>
            <meta http-equiv="x-ua-compatible" content="ie=9"/>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
            <script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
            <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
          
            <script type="text/javascript">
                window.onload = function ()
                {
                    var paper = new Raphael(Raphael("container", "100%", "100%"));
                    var sidebar = paper.rect(0, 43.5, 69, 620);
                    var rect = paper.rect(10, 50, 51, 41, 5).attr({stroke: '#6DAACA', 'stroke-width': 1, fill: '#D6F2FC'});
                    var circle1 = paper.circle(35, 145, 25).attr({fill: '#fff', 'stroke-width': 2, stroke: '#399324'});
                    var circle2 = paper.circle(35, 225, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#9E2F3C'});
                    var circle3 = paper.circle(35, 310, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#D5C096'});
                    var Customrect = paper.path("M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411");
​
                    // circle clonning
                    paper.set(circle1);
                  ``
                  var line;
                    var clone_handler = function () {
                        var x = this.clone();
                        x.drag(move, start, up);
                    };
                    var start = function (x, y, event) {
                        this.ox = this.attr("cx");
                        this.oy = this.attr("cy");
                        line = paper.path("M"+" "+this.ox+" "+this.oy);
                    },
                            move = function (dx, dy) {
                                this.attr({
                                    cx: this.ox + dx,
                                    cy: this.oy + dy
                                });
                              
                            },
                            move2 = function () {
                             line.remove();
                              line = paper.path("M"+" "+this.ox+" "+this.oy+"L"+this.attr("cx")+" "+this.attr("cy")); 
                            }
                            up = function () {
                                this.animate({
                                    r: 20,
                                    opacity: '.8',
                                }, 500, ">");
                            this.drag(move2, start, up);
                            };
                    circle1.mousemove(clone_handler);
                    circle2.mousemove(clone_handler);
                    circle3.mousemove(clone_handler);
                  
                };
            </script>
        </head>
        <body>
            <div id="container">
                <div id="header" style="margin-bottom: 0;">
                    <h1 id="title">Editor</h1>
                    <div id="footer"></div>
                </div>
            </div>
        </body>
    </html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers