JSFiddle - React, Tailwind, and code Playground

by Dinesh Patra

HTML

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="300px" height="300px">
   <path id="path" d="M0 150 
            L20 150 
            L25 140 
            L30 150 
            L38 110 
            L46 170
            L52 130
            L57 155
            L62 150
            L80 150 " fill="none" stroke="red"
  stroke-width="2" />
  </svg>

JavaScript

var path = document.getElementById('path');
var d = {
	origin: {
		x: 20, y=150
	},
    lines: [{20,150}, {25,140}, {30,150}, {38,110}, {46,170}, {52,130}, {57,155}, {62,150}, {80,150}]
}
path.setAttribute('d', 'M0 150 L20 150 L25 140 L30 150 L38 110 L46 170 L52 130 L57 155 L62 150 L80 150');