I would use React or a similar library with renderToStaticMarkup to produce SVG, because the JSX syntax basically gives you an XML literal. You can compose XML

I would use React or a similar library with renderToStaticMarkup to produce SVG, because the JSX syntax basically gives you an XML literal. You can compose XML expression and write functions that take and return XML fragments. Those features significantly reduced the XML/HTML boilerplate for a document export system I migrated to React/JSX. The big annoyance is that it requires a build step to transform the JSX into regular JS, but if you’re using Typescript already (I was) then it’s a single flag to enable. Or go WebGL. That also sounds like a fun learning project.