Lakshman Pilaka Lakshman Pilaka - 4 months ago 7
CSS Question

Multiple dots on <hr />

I have seen this link and using the code, i could successfully achieve this.
My requirement is to keep multiple dots on the line at 25%, 30%... so on dynamically. These values come from a database. enter image description here

Wondering how to achieve this.


The code to do this via svg is fairly straight forward.

#lineWithDots {
  width: 100%;
  height: 20;

#lineWithDots rect {
  width: 100%;
  stroke: rgb(164, 188, 194);

#lineWithDots circle {
  stroke: rgb(0, 0, 0);
  fill: rgb(255, 255, 255);
<svg id="lineWithDots">
  <g transform="translate(0,10)">
    <rect height="2" y="-1" />
    <circle r="4" cx="35%" />
    <circle r="4" cx="85%" />