<article>

  <h1>f(x) = 1 / x<sup>2</sup></h1>
  <div class="axis" id="axis_1_x2" style="--c: 14; --cx: 7; --cy: 13; --dcolor: #080;">
    <div class="dot" style="--x: -6;"></div>
    <div class="dot" style="--x: -5;"></div>
    <div class="dot" style="--x: -4;"></div>
    <div class="dot" style="--x: -3;"></div>
    <div class="dot" style="--x: -2;"></div>
    <div class="dot" style="--x: -1;"></div>
    <div class="dot" style="--x: -0.75;"></div>
    <div class="dot" style="--x: -0.6;"></div>
    <div class="dot" style="--x: -0.5;"></div>
    <div class="dot" style="--x: -0.4;"></div>
    <div class="dot" style="--x: -0.3;"></div>
    <div class="dot" style="--x: 0.3;"></div>
    <div class="dot" style="--x: 0.4;"></div>
    <div class="dot" style="--x: 0.5;"></div>
    <div class="dot" style="--x: 0.6;"></div>
    <div class="dot" style="--x: 0.75;"></div>
    <div class="dot" style="--x: 1;"></div>
    <div class="dot" style="--x: 2;"></div>
    <div class="dot" style="--x: 3;"></div>
    <div class="dot" style="--x: 4;"></div>
    <div class="dot" style="--x: 5;"></div>
    <div class="dot" style="--x: 6;"></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_1_x2 {
  --size: 350px;
}
#axis_1_x2 .dot {
  /**
   * f(x) = 1 / x^2
   *        x^2 = var(--x) * var(--x)
   */
  --function: calc(1 / (var(--x) * var(--x)));
}


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

article {
  margin: 30px;
}