singleInstanceSVG

In the pug template

- const svg = helpers.singleInstanceSVG('template name in the metrics','text to be displayed') div(class=`block__svg`)!= svg

Each name display is handled in a separate js file in the constants/svg-metrics folder.

The possible values are:

width: number; fontWeight?: number; path?: string; anchor?: string; startOffset?: string; offsetX?: string; offsetY?: string; forcedFontSize?: number; maxFontSize?: number; subtractAccentSize?: number; matchFontSize?: boolean; fill?: string; stroke?: string; letterFill?: string[]; letterStroke?: string[]; letterSpacing?: number; strokeWidth?: number; strokeDasharray?: string; font: string; fontPath: string;

width, path, font, fontPath are required values. path is specified either in common or, when creating multiple SVGs, instances. forcedFontSize specifies a static font size and would override maxFontSize, which is dynamic depending on the name length and the width.

Simple example

const cover = {  width: 200,  fontWeight: 400,  fill: 'lavender',  path: 'M 15 51 C 56 6 138 73 194 1',  anchor: 'middle',  startOffset: '50%',  maxFontSize: 100,  strokeDasharray: '5 5 5',  strokeWidth: 1,  stroke: 'purple',  letterSpacing: 1,  font: 'WonderblyBoing-Medium',  fontPath: './build/fonts/WonderblyBoing-Medium.otf', };  module.exports = [cover];

This tool can be used to edit the paths.

Stroke styles

Stroke-dasharray

Takes a series of comma- or space-separated numbers as its argument to dash a stroke (5,10,5 for example)

letterFill and letterStroke override fill and stroke if they co-exist.

More complex example

const common = {  width: 200,  fontWeight: 400,  path: 'M 15 51 C 56 6 138 73 194 1',  anchor: 'end',  startOffset: '95%',  maxFontSize: 100,  strokeWidth: 1,  strokeDasharray: '6 3 6',  letterSpacing: 1,  font: 'WonderblyBoing-Medium',  fontPath: './build/fonts/WonderblyBoing-Medium.otf', }; const instances = [{  letterStroke: ['green', 'gold', 'magenta', 'lavender', '#ff99cc'],  letterFill: ['honeydew', 'snow', '#facade'], }]; const cover = instances.map(i => {  return {   ...common,   ...i, }; }); module.exports = cover;

This merges the instances with the common properties to avoid repetition.

subtractAccentSize

Optional. This looks for the presence of any accented characters in the string ÀÃÁÄÅÂÆÇÈÊÉËÌÍÎÏÑÒÓÔÕÖØŠÙÚÛÜÝŸŽßàáâãäåæçèéêëìíîïñšòóôöøùúûüýÿžõ and reduces the maxFontSize of the SVG in the metrics by a specified subtractAccentSize size. This will help with fitting all names in the available space.

Width according to name length

For better control, this can be added to the metrics as an object.

width: { l2: 30, l3: 50, l4: 70, l5: 90, l6: 110, l7: 130, l8: 150, l9: 150, l10: 155, l11: 155, l12: 155, l13: 155, },

Textured SVG / CSS SVG mask

Create an SVG element with a fill of #FFF. This technique doubles the SVG on the same path, as they use the same metrics, creating an identical SVG filled with black through CSS. CSS can texture it with an image using a combination of blend modes.

In the pug template

.cover  img.background-image.left(src=`/images/background.png`)  div(class=`block__svg`)!= svg .cover.white  div(class=`block__svg black`)!= svg  img.background-image.left(src=`/images/texture.png`)

In the CSS

.cover.white {  background: #fff;  mix-blend-mode: darken } .cover.white img {  mix-blend-mode: lighten } .block__svg.black text {  fill: #000 }

figma

Optional. If set to true, the SVG constant path numerical values will be converted from MM to PX. This allows inclusion of SVGPaths straight from exported bounding cropped page areas with child SVGPaths from Figma.

In the layout provided on Figma, select the relevant bounding box in the left-hand pane. From the right-hand pane, export the SVG. Inspect the contents of the downloaded file and copy the path for use in the metrics.