<div id="container">
	<div id="ui">
		<div style="display: flex">
			<label for="rx">Radius X: </label>
			<input type="range" id="rx" name="rx" min="0" max="500" step="1" value="250">
			<span id="rx-val">250</span>
		</div>
		<div style="display: flex">
			<label for="ry">Radius Y: </label>
			<input type="range" id="ry" name="ry" min="0" max="500" step="1" value="250">
			<span id="ry-val">250</span>
		</div>
		<div style="display: flex">
			<label for="large-arc">Large Arc Flag: </label>
			<input type="checkbox" id="large-arc" name="large-arc">
		</div>
		<div style="display: flex">
			<label for="sweep">Sweep Flag: </label>
			<input type="checkbox" id="sweep" name="sweep">
		</div>
	</div>
</div>
body {
	margin: 0;
	background-color: #202020;
}

#container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

#ui {
	position: absolute;
	top: 30px;
	left: 33%;
	transform: translateX(-33%);
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

import { SvJs, Gen } from "https://cdn.jsdelivr.net/npm/svjs@latest/dist/svjs.min.js";

// Parent SVG.
const svg = new SvJs().addTo(document.getElementById("container"));

// Viewport and viewBox (1:1 aspect ratio).
const svgSize = Math.min(window.innerWidth, window.innerHeight);
svg.set({ width: svgSize, height: svgSize, viewBox: "0 0 1000 1000" });

// Background.
svg.create("rect").set({
	x: 0,
	y: 0,
	width: 1000,
	height: 1000,
	fill: "#181818"
});

// Elliptical Arc Curve.
let arc = svg.create("path").set({
	fill: "none",
	stroke: "purple",
	stroke_width: 5,
	d: "M 300 500 A 250 250 0 0 0 700 500"
});

// UI controls.
let radiusX = document.getElementById("rx");
let radiusY = document.getElementById("ry");
let largeArc = document.getElementById("large-arc");
let sweep = document.getElementById("sweep");

// UI update function.
function updateUI() {
	let rx = radiusX.value;
	let ry = radiusY.value;
	let la = largeArc.checked ? "1" : "0";
	let sw = sweep.checked ? "1" : "0";
	arc.set({
		d: `M 300 500 A ${rx} ${ry} 0 ${la} ${sw} 700 500`
	});
	document.getElementById("rx-val").innerText = rx;
	document.getElementById("ry-val").innerText = ry;
}

// Attach event listenters to each input.
radiusX.addEventListener("input", () => {
	updateUI();
});
radiusY.addEventListener("input", () => {
	updateUI();
});
largeArc.addEventListener("change", () => {
	updateUI();
});
sweep.addEventListener("change", () => {
	updateUI();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.