multiLetterSVG

This is useful when an SVG needs to be handled as separate letters. It takes a single string and it is easier to manipulate the position of each letter. Make sure the instances array length is as long as the maximum text length. So for a name of 3 characters, 3 metrics items should work, therefore the text is fixed at 3 characters for the purposes of this demo.

In the pug template

- const svgs = helpers.multiLetterSVG('cover', 'Jo') for svg, i in svgs  div(class=`block__svg`)!= svgs[i]

The 2-letter name in this example is split across the page at different positions. If a dynamic data.name is the string input, the metrics items array length needs to be 13 to accommodate any possible names.

In the metrics

const common = {  width: 100,  fontWeight: 400,  anchor: 'end',  startOffset: '95%',  maxFontSize: 50,  strokeWidth: 1,  strokeDasharray: '6,3,6',  font: 'WonderblyBoing-Medium',  fontPath: './build/fonts/WonderblyBoing-Medium.otf', }; const instances = [{  path: 'M -85 51 C -44 6 38 73 94 1',
 fill: 'pink', },{  path: 'M 15 81 C 56 36 138 103 194 31',  fill: 'purple', }]; const cover = instances.map(i => {  return {   ...common,   ...i,  }; }); module.exports = cover;