.dcss-piecewise

Maps a value through more than two stops, a domain and a range in pieces.

Example

Result
Markup
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/scale.css">
<link rel="stylesheet" href="families/format.css">

<div class="dcss-scale-linear dcss-piecewise" style="--stops: 3; --domain-0: 4; --domain-1: 2; --domain-2: 1; --range-0: 1; --range-1: 2; --range-2: 4; --value: 1.5">
  <output class="dcss-format-fixed" style="--value: var(--dcss-scale-linear); --precision: 2"></output>
</div>

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only