funvill/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Javascript generated laser cut pendants</title>
		<script type="text/javascript" src="raphael-min.js"></script>
		<script type="text/javascript" src="raphael.export.js"></script>
    </head>
    <body>
        <div id="canvas"></div>

		<script>
		window.onload = function () {

		var paper;

		/**
		 * DrawCircle( x, y, r, size, brush )
		 * Draw two circles, one inside of the other
		 *
		 * Parameters:
		 * X - X Offset to the center of the circle
		 * Y - Y Offset to the center of the circle
		 * R - The radius of the circle.
		 * Size - The size between the two lines of the circle.
		 * Brush - The brush to use to draw these two circles.
		 */
		function DrawCircle( x, y, r, size, brush ) {
			paper.ellipse( x, y, r-(size/2), r-(size/2)).attr( brush );
			paper.ellipse( x, y, r+(size/2), r+(size/2)).attr( brush );
		}

			// Defined units of measurement in Pixels.
			var ONE_MM_IN_PX	=  4 ;
			var ONE_CM_IN_PX	= 38 ;

			// Brushes
			var BRUSH_CUT_FIRST 	= {fill: "none", stroke: "#000000", "stroke-width": "1" } ;
			var BRUSH_CUT_SECOND	= {fill: "none", stroke: "#0000FF", "stroke-width": "1" } ;
			var BRUSH_ETCH 			= {fill: "none", stroke: "#00FF00", "stroke-width": "5" } ;


			// Make a working area that is 15cm x 15cm.
			var CANVAS_HEIGHT	= ONE_CM_IN_PX*15;
			var CANVAS_WIDTH		= ONE_CM_IN_PX*15;

			// Create the Raphael object to hold the SVG elements.
			// I like to start away from the top left conner to give the image a margin.
			// http://raphaeljs.com/reference.html#Raphael
			paper = Raphael(100, 100, CANVAS_WIDTH, CANVAS_HEIGHT);

		  DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
			DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX*2+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
			DrawCircle(ONE_CM_IN_PX*2+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
			DrawCircle(ONE_CM_IN_PX*2+10,ONE_CM_IN_PX*2+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;


		}
		</script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Javascript generated laser cut pendants</title>
	<script type="text/javascript" src="raphael-min.js"></script>
	<script type="text/javascript" src="raphael.export.js"></script>
	</head>
	<body>
	<div id="canvas"></div>

	<script>
	window.onload = function () {

	var paper;

	/**
	* DrawCircle( x, y, r, size, brush )
	* Draw two circles, one inside of the other
	*
	* Parameters:
	* X - X Offset to the center of the circle
	* Y - Y Offset to the center of the circle
	* R - The radius of the circle.
	* Size - The size between the two lines of the circle.
	* Brush - The brush to use to draw these two circles.
	*/
	function DrawCircle( x, y, r, size, brush ) {
	paper.ellipse( x, y, r-(size/2), r-(size/2)).attr( brush );
	paper.ellipse( x, y, r+(size/2), r+(size/2)).attr( brush );
	}

	// Defined units of measurement in Pixels.
	var ONE_MM_IN_PX = 4 ;
	var ONE_CM_IN_PX = 38 ;

	// Brushes
	var BRUSH_CUT_FIRST = {fill: "none", stroke: "#000000", "stroke-width": "1" } ;
	var BRUSH_CUT_SECOND = {fill: "none", stroke: "#0000FF", "stroke-width": "1" } ;
	var BRUSH_ETCH = {fill: "none", stroke: "#00FF00", "stroke-width": "5" } ;


	// Make a working area that is 15cm x 15cm.
	var CANVAS_HEIGHT = ONE_CM_IN_PX*15;
	var CANVAS_WIDTH = ONE_CM_IN_PX*15;

	// Create the Raphael object to hold the SVG elements.
	// I like to start away from the top left conner to give the image a margin.
	// http://raphaeljs.com/reference.html#Raphael
	paper = Raphael(100, 100, CANVAS_WIDTH, CANVAS_HEIGHT);

	DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
	DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX2+10,ONE_CM_IN_PX, ONE_MM_IN_PX2, BRUSH_CUT_FIRST ) ;
	DrawCircle(ONE_CM_IN_PX2+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX2, BRUSH_CUT_FIRST ) ;
	DrawCircle(ONE_CM_IN_PX2+10,ONE_CM_IN_PX2+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;



	}
	</script>
	</body>
	</html>