JSFiddle - React, Tailwind, and code Playground

by evgkch

JavaScript

class SVG {

  static create(qualifiedName, props, children) {
    const el = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
    if (props)
    	SVG.attr(el, props);
    if (children)
    	children.forEach(child => el.appendChild(child));
    return el;
  }

  static attr(target, props) {
    for (let key in props) {
      target.setAttribute(key, props[key]);
    }
  } 

}

const svg = SVG.create(
	'svg',
  { width: 200, height: 100 },
  [
  	SVG.create(
    	'line',
      { x1: 10, y1: 90, x2: 190, y2: 90, stroke: 'black' }
    ),
    SVG.create(
    	'line',
      { x1: 10, y1: 90, x2: 190, y2: 90, stroke: 'black' }
    ),
  ]
)

document.body.appendChild(svg)