Demo #3

by craic

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<div id="paper"></div>
<p>next example &gt;  Back </p>

CSS

#paper {
    background-color: #f0f0f0; 
    width: 400px;
    height: 400px;
}

JavaScript

// Basic shapes with no styling:
paper = Raphael("paper", 400, 400);
// Rectangles
// rect(x, y, width, height, [corner radius])
// Basic rectangle - default corner radius is 0
paper.rect(25, 25, 100, 100);
// Rectangle with rounded corners
paper.rect(25, 150, 150, 75, 10);

// Circles and Ellipses
// circle(x_center, y_center, radius)
paper.circle(200, 75, 50);

// ellipse(x_center, y_center, h_radius, v_radius)
paper.ellipse(100, 290, 70, 30);
paper.ellipse(100, 310, 20, 70);

// Basic Straight Lines - Horizontal and Vertical
paper.path("M 320 20 L 320 120");
paper.path("M 280 70 L 360 70");

// Basic Straight Lines - Diagonal
paper.path("M 200 250 L 300 350");
paper.path("M 300 250 L 200 350");