Rapha ë l simple demo

You can use Raphael to draw different strong patterns and write mouse-triggered events.
The following is Javascript. Click the black circle below, but the above two white circles disappear.
Note: Go to ttp: // raphaeljs.com to download the JS file.
VaR paper1 = Raphael (1, 1,400,400 );

VaR Circle = paper1.circle (150,140,110 );

VaR rect = paper1.rect (100,100,100, 70, 10 );

VaR circle2 = paper1.circle (120,125, 10 );

VaR circle3 = paper1.circle (140,150, 10 );

Rect. ATTR ("fill", "#000 ");

Circle. ATTR ("fill", "# f33 ");

Circle2.attr ("fill", "# fff ");

Circle3.attr ("fill", "# fff ");

Circle. ATTR ("stroke", "# fff ");

Circle. ATTR ("stroke", "# f33 ");

Circle2.attr ("stroke", "# fff ");

Circle3.attr ("stroke", "# fff ");

VaR paper = Raphael (1,400,400,800 );
// Creates circle at x = 50, y = 40, with radius 10
VaR circle4 = paper. Circle (100,100, 10 );
// Sets the fill attribute of the circle to red (# f00)
Circle4.attr ("fill", "#000 ");

Circle4.node. onclick = function () {rect. tofront ();};

VaR ST = paper1.set ();
St. Push (paper1.circle (10, 10, 5 ));
St. Push (paper1.circle (30, 10, 5 ));
St. ATTR ({fill: "red "});
VaR T = paper. Text (100, 50, "Look mom, I'm scalable! ");
VaR c = paper. Path ({stroke: "#036"}). moveTo (10, 10). lineto (500,600); // draw a diagonal line
VaR c = paper. Path ({stroke: "#036"}, "M 10 10 L 50 50"); // same

VaR c = paper. Path ({stroke: "#036"}). moveTo (10, 10). cplineto (50, 70, 90 );
VaR c = paper1.path ({stroke: "#036"}). moveTo (100, 50). andclose ();