louisremi/index.html

## index.html
<!DOCTYPE html>
<html>
  <!--

<== The code that creates the glyph is in script.js

  -->
  <head>
    <meta charset="utf-8" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <a href="http://pluminjs.com">
      <img width="210" height="50" src="//byte-foundry.github.io/plumin.js/plumin.png"
    ></a>
    <textarea class="result">A
(edit me!)
    </textarea>
    <a href="#" id="flake">Draw me a flake!</a>
    <a download="demo.otf" href="#" id="download">▽ Download</a>
    <canvas id="canvas" width="1024" height="1024" hidden ></canvas>

    <script src="//byte-foundry.github.io/plumin.js/dist/plumin.js"></script>
    <script src="script.js"></script>
  </body>

</html>

## script.js
// plumin.paper is aliased to the variable p, for conciseness
(function(p) {
'use strict';

// Setup paper.js by providing a canvas element
p.setup( document.getElementById('canvas') );

// create a new font and specify its name
var demo = new p.Font({
        familyName: 'Demo',
        ascender: 500
    }),
    // create the glyph 'p' and add it directly to the demo font
    glyph_A = demo.addGlyph(new p.Glyph({
        name: 'A',
        unicode: 'A',
        advanceWidth: 500
    }));

(window.flake = function() {
  glyph_A.contours = [];
  // create a random flake
  glyph_A.addContour(new p.Path.Star({
      center: [250, 250],
      points: 3 + Math.round( Math.random() * 8 ),
      radius1: 150 + Math.round( Math.random() * 100 ),
      radius2: 20 + Math.round( Math.random() * 100 )

  })).simplify( - Math.random() * 10 );

      // create or update the binary data of the OpenType font
  demo.updateOTCommands()
      // make it available in the page as a font-face
      .addToFonts();
})();

// Draw me a new flake!
document.getElementById('flake').onclick = function() {
  flake();
};

// After OT commands have been updated, the font is ready to download
document.getElementById('download').onclick = function() {
    demo.download();
};

})(plumin.paper);

## style.css
body > a {
  display: block;
}

textarea.result {
  width: 100%;
  height: 300px;

  margin: 0;
	padding: 20px;

	border: 0;
	border-radius: 0;

	font-family: 'Demo', sans-serif;
	font-size: 50px;

	resize: none;
}

#download,
#flake {
	display: inline-block;
	margin: 5px;
	padding: 5px 7px;

	text-decoration: none;
	color: #FFE;
	background: #FF725E;
}
	<!DOCTYPE html>
	<html>
	<!--

	<== The code that creates the glyph is in script.js

	-->
	<head>
	<meta charset="utf-8" />
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" />
	<link href="style.css" rel="stylesheet" />
	</head>

	<body>
	<a href="http://pluminjs.com">
	<img width="210" height="50" src="//byte-foundry.github.io/plumin.js/plumin.png"
	></a>
	<textarea class="result">A
	(edit me!)
	</textarea>
	<a href="#" id="flake">Draw me a flake!</a>
	<a download="demo.otf" href="#" id="download">▽ Download</a>
	<canvas id="canvas" width="1024" height="1024" hidden ></canvas>

	<script src="//byte-foundry.github.io/plumin.js/dist/plumin.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	// plumin.paper is aliased to the variable p, for conciseness
	(function(p) {
	'use strict';

	// Setup paper.js by providing a canvas element
	p.setup( document.getElementById('canvas') );

	// create a new font and specify its name
	var demo = new p.Font({
	familyName: 'Demo',
	ascender: 500
	}),
	// create the glyph 'p' and add it directly to the demo font
	glyph_A = demo.addGlyph(new p.Glyph({
	name: 'A',
	unicode: 'A',
	advanceWidth: 500
	}));

	(window.flake = function() {
	glyph_A.contours = [];
	// create a random flake
	glyph_A.addContour(new p.Path.Star({
	center: [250, 250],
	points: 3 + Math.round( Math.random() * 8 ),
	radius1: 150 + Math.round( Math.random() * 100 ),
	radius2: 20 + Math.round( Math.random() * 100 )

	})).simplify( - Math.random() * 10 );

	// create or update the binary data of the OpenType font
	demo.updateOTCommands()
	// make it available in the page as a font-face
	.addToFonts();
	})();

	// Draw me a new flake!
	document.getElementById('flake').onclick = function() {
	flake();
	};

	// After OT commands have been updated, the font is ready to download
	document.getElementById('download').onclick = function() {
	demo.download();
	};

	})(plumin.paper);
	body > a {
	display: block;
	}

	textarea.result {
	width: 100%;
	height: 300px;

	margin: 0;
	padding: 20px;

	border: 0;
	border-radius: 0;

	font-family: 'Demo', sans-serif;
	font-size: 50px;

	resize: none;
	}

	#download,
	#flake {
	display: inline-block;
	margin: 5px;
	padding: 5px 7px;

	text-decoration: none;
	color: #FFE;
	background: #FF725E;
	}