svg letter tracing

font-trace.js

const PHI = 1.6180339887498948;

const params = {
  'font-size': 1,
  'cap-height': 1,
  'x-height': 1 / PHI,
  'baseline': 0,
  'ascender-height': 1.1,
  'descender-height': 0.3,
  'overshoot': 0.015,
  'slant': 0,
  'width': 0.8,
  'weight': 0.04,
  'radius': 0.02
};

function glyph( params ) {

  const api = {
    bind,
    line: bind( line ),
    curve: bind( curve )
  };

  function bind( fn ) {
    return ( ...args ) => {
      fn( params, args );
      return api;
    };
  }

  return api;
}

function project( params ) {
  const height = params[ 'font-size' ];
  const width = params[ 'width' ] * height;

  const units = {
    b: params[ 'baseline' ] * height,
    c: params[ 'cap-height' ] * height,
    a: params[ 'ascender-height' ] * height,
    d: params[ 'descender-height' ] * -height,
    x: params[ 'x-height' ] * height
  };

  return ( [ x, y ] ) => {
    const ux = width;
    const uy = /[a-z]$/.test( y ) ? units[ y.substr( y.length - 1 ) ] : height;
    const px = ux * parseFloat( x );
    const py = uy * parseFloat( y );

    return [ rx, ry ];
  };
}

function slant( params ) {
  const size = params[ 'font-size' ];
  const width = params[ 'width' ] * size;
  const sx = params[ 'slant' ] * width;

  return ( [ x, y ] ) => [ x + sx * y, y ];
}

function line( params, points ) {
  return points
    .map( project( params ) )
    .map( slant( params ) )

const glyphs = {
  'F': glyph( params )
         .line( [ [ 0, 'c' ], [ 1, 'c' ] ] )
         .line( [ [ 0, 'b' ], [ 0, 'x' ], [ 1, 'x' ] ] )
};