<article>

  <h1>f(x) = x - 3</h1>
  <div class="axis" id="axis_x-3" style="--c: 20; --cx: 5; --cy: 12; --dsize: 6;">
    <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;"></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 class="dot" style="--x: 7"></div>
    <div class="dot" style="--x: 8"></div>
    <div class="dot" style="--x: 9;"></div>
    <div class="dot" style="--x: 10;"></div>
    <div class="dot" style="--x: 11;"></div>
    <div class="dot" style="--x: 12; --dcolor: red; --dsize: 10;"></div>
    <div class="dot" style="--x: 13;"></div>
    <div class="dot" style="--x: 14;"></div>
    <div class="dot" style="--x: 15;"></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_x-3 {
  --size: 350px;
}
#axis_x-3 .dot {
  /**
   * f(x) = x - 3
   *        x = var(--x)
   */
  --function: calc(var(--x) - 3);
}


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

article {
  margin: 30px;
}