Aug 25, 2026

Implementing a serverless function that creates custom charts. I started by placing an SVG template in a string literal. This evolved into creating functions that generate SVG primitives. The resulting is code that is much cleaner, more readable, and potentially more flexible.

// Example generating a text element
function text( { 
  x, 
  y, 
  text, 
  children, 
  fontSize, 
  fontWeight, 
  fill, 
  textAnchor = 'middle', 
  dominantBaseline = 'hanging', 
  className 
} ) {
  const content = children ? children.join( '' ) : text );

  return `
    <text
      x="${x}"
      y="${y}"
      text-anchor="${textAnchor}"
      dominant-baseline="${dominantBaseline}"
      ${fontSize !== undefined ? `font-size="${fontSize}"` : ''}
      ${fontWeight !== undefined ? `font-weight="${fontWeight}"` : ''}
      ${fill !== undefined ? `fill="${fill}"` : ''}
      ${className ? `class="${className}"` : ''}>
    ${content}
  </text>`;
}