Allora ho capito male, pensavo che con "Ecco qui l'immagine finale" tu volessi intenedere che quello doveva essere il risultato che volevi ottenere.

Ma tutte le volte che ho provato con linear-gradient ho fallito, ovvero non sono materialmente riuscito
Col linear-gradient puoi ottenere dei punti alla distanza stabilita ma presumo che se imposti una larghezza della linea maggiore di un pixel, non saranno mostrati dei punti tondi ma dei rettangolini.

Hai provato a vedere il fiddle linkato da chi ha risposto su quella discussione di stackoverflow?
https://jsfiddle.net/yyp67pbg/

Un'altra proposta, sempre su quella discussione, è quella di usare uno pseudo-elemento e impostare una serie di punti nel content, quindi usare il letter-spacing per ottenere la distanza voluta tra i punti.

codice:
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
Qui la fonte

Magari giocando anche su font-size puoi impostare anche una diversa dimensione dei punti.

Hai provato questa soluzione?