JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

CSS

path {
  fill: #f00;
  stroke: #f00;
  stroke-width: 2;
}

JavaScript

const ns = 'http://www.w3.org/2000/svg'

let data = []
let position = 0
let velocity = 0.3
let acceleration = 0

for (let i = 0; i < 100; i += 1) {
	if (i % 20 == 0) {
  	acceleration = Math.random() * 0.05
  }

	velocity += Math.random() * acceleration
  position = position + velocity
	data.push([i * 3, position + Math.random() * 5])
}

let d = `M ${data.map(d => d.join(' ')).join(' L ')}`

var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(ns, 'width', '600px')
svg.setAttributeNS(ns, 'height', '400px')

var path = document.createElementNS(ns, 'path')
path.setAttributeNS(ns, 'd', d)

svg.appendChild(path)

document.body.appendChild(svg)