JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 300"></svg>

CSS

svg {
  width: 300px;
  height: 300px;
  stroke: blue;
  stroke-width: 5px;
  border: 1px solid silver;
}

JavaScript

let svg = document.querySelector('svg');
let line = document.createElementNS('http://www.w3.org/2000/svg');
line.setAttribute('x1', '50');
line.setAttribute('y1', '50');
line.setAttribute('x2', '250');
line.setAttribute('y2', '250');
svg.appendChild();