UI Delight 1

function buildSvg(props: { children: string; dimensions: Vec2 }) {
  const [width, height] = props.dimensions;

  return `<?xml version="1.0" encoding="UTF-8"?>
  <svg xmlns="http://www.w3.org/2000/svg"
    width="${width}"
    height="${height}"
    viewBox="0 0 ${width} ${height}"
    fill="none">
    ${props.children}
  </svg>`;
}

function groupWithRotationAboutCenter(props: {
  size: number;
  rotation: number;
  children: string;
}): string {
  const centre = props.size / 2;
  return `<g
    transform="rotate(${props.rotation} ${centre} ${centre})"
    filter="url(#shadow)">
    ${props.children}
  </g>`;
}