funvill/snowflake.html

## snowflake.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>
    	<a id='downloadLink'>Download</a><br />
        <div id="canvas"></div>

		<script>

		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 );
		}

		/**
		 * Create a link that can be used to download the SVG file
		 */
		function CreateDownloadLink( linkName ) {
			// Create the download link.
			var svgString = paper.toSVG();
			var a = document.getElementById(linkName);
			a.download = 'mySvg.svg';
			a.type = 'image/svg+xml';
			bb = new Blob([svgString]);
			a.href = (window.URL || webkitURL).createObjectURL(bb);
		}


		function MakeSnowFlake( paper, size_x, size_y, brush )
		{
			// These numbers can change
			var line_thickness 	= 10 ;
			var ringCount 		= 20 ;
			var r 				= 100 ;
			var inner_offset	= 50 ;

			// Inner rings
			for( offset = 0 ; offset < ringCount ; offset++ ) {

				// 270 is a magic number I don't know why it works.
				var t = offset * (270/ringCount) ;
				var x = ( r * Math.cos(t) + (size_x/2));
				var y = ( r * Math.sin(t) + (size_y/2));

				DrawCircle( x+line_thickness+10 + inner_offset,
							y+line_thickness+10 + inner_offset,
							r - inner_offset ,
							line_thickness,
							brush ) ;
			}
		}


		window.onload = function () {

			// 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);

		    // Draw some circles on the page.
		    /**
		     * Paper.ellipse(x, y, rx, ry)
		     * Parameters
		     * x - x coordinate of the centre
		     * y - y coordinate of the centre
		     * rx - horizontal radius
		     * ry - vertical radius
		     *
		     * http://raphaeljs.com/reference.html#Paper.ellipse
		     */
		     /*
    		paper.ellipse( ONE_CM_IN_PX,   ONE_CM_IN_PX,   ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
    		paper.ellipse( ONE_CM_IN_PX,   ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
    		paper.ellipse( ONE_CM_IN_PX*2, ONE_CM_IN_PX,   ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
    		paper.ellipse( ONE_CM_IN_PX*2, ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
			*/

		    /*
			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 ) ;
			*/


			MakeSnowFlake( paper, ONE_CM_IN_PX*10, ONE_CM_IN_PX*10, BRUSH_CUT_FIRST ) ;


			CreateDownloadLink( 'downloadLink' );

		}
		</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>
	<a id='downloadLink'>Download</a><br />
	<div id="canvas"></div>

	<script>

	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 );
	}

	/**
	* Create a link that can be used to download the SVG file
	*/
	function CreateDownloadLink( linkName ) {
	// Create the download link.
	var svgString = paper.toSVG();
	var a = document.getElementById(linkName);
	a.download = 'mySvg.svg';
	a.type = 'image/svg+xml';
	bb = new Blob([svgString]);
	a.href = (window.URL \|\| webkitURL).createObjectURL(bb);
	}


	function MakeSnowFlake( paper, size_x, size_y, brush )
	{
	// These numbers can change
	var line_thickness = 10 ;
	var ringCount = 20 ;
	var r = 100 ;
	var inner_offset = 50 ;

	// Inner rings
	for( offset = 0 ; offset < ringCount ; offset++ ) {

	// 270 is a magic number I don't know why it works.
	var t = offset * (270/ringCount) ;
	var x = ( r * Math.cos(t) + (size_x/2));
	var y = ( r * Math.sin(t) + (size_y/2));

	DrawCircle( x+line_thickness+10 + inner_offset,
	y+line_thickness+10 + inner_offset,
	r - inner_offset ,
	line_thickness,
	brush ) ;
	}
	}



	window.onload = function () {

	// 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);

	// Draw some circles on the page.
	/**
	* Paper.ellipse(x, y, rx, ry)
	* Parameters
	* x - x coordinate of the centre
	* y - y coordinate of the centre
	* rx - horizontal radius
	* ry - vertical radius
	*
	* http://raphaeljs.com/reference.html#Paper.ellipse
	*/
	/*
	paper.ellipse( ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
	paper.ellipse( ONE_CM_IN_PX, ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
	paper.ellipse( ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
	paper.ellipse( ONE_CM_IN_PX2, ONE_CM_IN_PX2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
	*/

	/*
	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 ) ;
	*/


	MakeSnowFlake( paper, ONE_CM_IN_PX10, ONE_CM_IN_PX10, BRUSH_CUT_FIRST ) ;


	CreateDownloadLink( 'downloadLink' );

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