JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div></div>

<div id="test"></div>

<pre id="out"></pre>

CSS

body {
  --main-color: #999;
	--border-color: #666;
	--width: 300px;
	--height: 80px;
	--border-width: 5px;
	--border-radius: 40px;
	--inside-circle-width: calc(var(--height) - var(--border-width) * 2);
	--a: calc(var(--width) - var(--inside-circle-width));
	--b: calc(var(--a) / var(--width));
	--c: calc(var(--b) * 100%);
}

	div {
		position: absolute;
    border: 1px solid red;
		top: 0;
		left: 0;
		width: var(--c);	
  }

JavaScript

const vars = `  --main-color: #999;
	--border-color: #666;
	--width: 300px;
	--height: 80px;
	--border-width: 5px;
	--border-radius: 40px;
	--inside-circle-width: calc(var(--height) - var(--border-width) * 2);
	--a: calc(var(--width) - var(--inside-circle-width));
	--b: calc(var(--a) / var(--width));
	--c: calc(var(--b) * 100%);`.split('\n').map(item => item.match(/--[\w-]+/))
  
for (const x of vars) {
test.style.width = `var(${x})`;
out.textContent += x + ': ' + getComputedStyle(test).width + '\n';
}