Plumin.js | Create and Manipulate fonts like there's no tomorrow.

var font = new plumin.Font({
		familyName: 'Demo'
	}),

// glyphs
	A = new plumin.Glyph({
		name: 'A',
		advanceWidth: 512
	}),
	B = new plumin.Glyph({
		name: 'B',
		advanceWidth: 512
	}),
	C = new plumin.Glyph({
		name: 'C',
		advanceWidth: 512
	}),

// contours
	ctA = new plumin.Contour({ closed: true }),
	ctB = new plumin.Contour({ closed: true }),
	ctC = new plumin.Contour({ closed: true });

ctA.addNodes([
	new plumin.Node({ point: [50, 0] }),
	new plumin.Node({ point: [256, 800] }),
	new plumin.Node({ point: [462, 0] })
]);

ctB.addNodes([
	new plumin.Node({ point: [50, 0] }),
	new plumin.Node({ point: [50, 800] }),
	new plumin.Node({ point: [462, 800] }),
	new plumin.Node({ point: [462, 0] })
]);

ctC.addNodes([
	new plumin.Node({
		point: [50, 400],
		handleIn: [0, -200],
		handleOut: [0, 200]
	}),
	new plumin.Node({
		point: [256, 800],
		handleIn: [-200, 0],
		handleOut: [200, 0]
	}),
	new plumin.Node({
		point: [462, 400],
		handleIn: [0, 200],
		handleOut: [0, -200]
	}),
	new plumin.Node({
		point: [256, 0],
		handleIn: [200, 0],
		handleOut: [-200, 0]
	})
]);

A.addContour(ctA);
B.addContour(ctB);
C.addContour(ctC);

font.addGlyphs([
		A,
		B,
		C
	])
	.prepareOT()
	.addToFonts();

/*
// animation are only fluid in Chrome
var center = new plumin.Point(256, 400);
(function onFrame() {
	ctA.rotate(3, center);
	ctB.rotate(-3, center);
	ctC.rotate(3, center);

font.prepareOT()
		.addToFonts();

requestAnimationFrame(onFrame);
})();
*/

return font;

▷ Run

▽ Download

– create and manipulate fonts like no one's watching.