<article>

  <h1>f(x) = 0.4x<sup>3</sup> - 5.25x - 4</h1>
  <div class="axis" id="axis_04x3_525x_4" style="--c: 16; --cx: 8; --cy: 4; --dsize: 7; --dcolor: #f63;">
    <div class="dot" style="--x: -4;"></div>
    <div class="dot" style="--x: -3.5;"></div>
    <div class="dot" style="--x: -3;"></div>
    <div class="dot" style="--x: -2.5;"></div>
    <div class="dot" style="--x: -2;"></div>
    <div class="dot" style="--x: -1.5;"></div>
    <div class="dot" style="--x: -1;"></div>
    <div class="dot" style="--x: -0.5;"></div>
    <div class="dot" style="--x: 0;"></div>
    <div class="dot" style="--x: 0.5;"></div>
    <div class="dot" style="--x: 1;"></div>
    <div class="dot" style="--x: 1.5;"></div>
    <div class="dot" style="--x: 2;"></div>
    <div class="dot" style="--x: 2.5;"></div>
    <div class="dot" style="--x: 3;"></div>
    <div class="dot" style="--x: 3.5;"></div>
    <div class="dot" style="--x: 4;"></div>
  </div>

</article>
.axis {
  --c: 10;
  --cx: 5;
  --cy: 5;
  --dsize: 10;
  --dcolor: #369;
  --size: 100%;
  position: relative;
  width: var(--size);
  height: 0;
  padding-top: var(--size);
  box-sizing: border-box;
  aspect-ratio: 1/1;
  background-image:
    linear-gradient(#0000 calc(var(--cy) * 100% / var(--c) - 1px), #0008 0 calc(var(--cy) * 100% / var(--c) + 1px), transparent 0),
    linear-gradient(to right, #0000 calc(var(--cx) * 100% / var(--c) - 1px), #0008 0 calc(var(--cx) * 100% / var(--c) + 1px), transparent 0),
    repeating-linear-gradient(#0002 0 0.5px, #0000 0 calc(100% / var(--c) - 0.5px), #0002 0 calc(100% / var(--c))),
    repeating-linear-gradient(to right, #0002 0 0.5px, #0000 0 calc(100% / var(--c) - 0.5px), #0002 0 calc(100% / var(--c)));
}

.axis.no-overflow {
  overflow: hidden;
}

.dot {
  --translationUnit: 100% / var(--c);
  --translationX: var(--translationUnit) * var(--cx);
  --translationY: var(--translationUnit) * var(--cy);
  /* Vertical is "flipped" in CSS: higher values go down! Do negative! */
  --y: calc(var(--translationY) - var(--translationUnit) * var(--function));
  width: calc(var(--dsize) * 1px);
  height: calc(var(--dsize) * 1px);
  background: var(--dcolor);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: calc(var(--translationX) + var(--x) * var(--translationUnit));
  top: var(--y);
}

/* Demo functions */
#axis_04x3_525x_4 {
  --size: 350px;
}
#axis_04x3_525x_4 .dot {
  /**
   * f(x) = 0.4x^3 - 5.25x - 4
   *        0.4x^3 = var(--x) * var(--x) * var(--x)
   *         5.25x = 5.25 * var(--x)
   */
  --function: calc(0.4 * var(--x) * var(--x) * var(--x) - 5.25 * var(--x) - 4);
}


/* demo - display only */
html, body {
  font-family: Helvetica, Arial, sans-serif;
}

article {
  margin: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.