.dcss-solve-rows

Starts each row of a plot where your formula reaches that row’s value, its inverse drawn as positions.

Example

Result

Markup
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/math.css">

<div class="dcss-solve-rows rw">
  <span><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i><i><i></i></i></span>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
  <p>
    <b></b>
  </p>
</div>
CSS
.rw i { --dcss-formula: calc(100 * pow(var(--dcss-input), 2)); }
.rw { --from: 0; --to: 1; --top: 0; --bottom: 100; width: 200px; height: 100px; font-size: 1px; line-height: 10px; border-left: 1px solid; }
.rw p { margin: 0; height: 10px; }
.rw b { display: inline-block; width: 0; height: 10px; vertical-align: top; }
.rw b::before { content: ""; display: block; width: 6px; height: 6px; margin: 2px -3px; border-radius: 50%; background: currentColor; }

Notes

Each call takes your own formula, written once as --dcss-formula in terms of --dcss-input. A .dcss-solve with data-dcss-steps="n" halves the range n times, one nested element a step, and BASICSS writes those elements for you: npx basicss page.html -o built.html.

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only