JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<svg>
  <line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="4" stroke-linecap="round"/>
</svg>

SCSS

html, body {
  height: 100%;
}

svg {
  height: 100%;
  width: 100%;
}

JavaScript

const svgRect = document.querySelector('svg').getBoundingClientRect();
const [width, height] = [svgRect.width, svgRect.height];

const f = x => x^2;
const range = {
	x: { min: -10, max: 10 },
  y: { min: -10, max: 10 },
};
const resolution = 10;

for (let i = 0 ; i < resolution; i++) {
	const x = (range.x.max - range.x.min) / resolution * i;
	const y = f(x);
}