Creating isometric dot background in css

Question

Desired outcome:

I want to create a background made with isometric dots. I've tried combining linear gradients to no avail. I don't want to use an image as that means I can't have dynamic foreground/background colors.

Answer 1

You need radial-gradient() here:

html {
  height:100%;
  
  --s: 30px; /* control the space between circles */
             /*        v-- the radius of circle */
  --g: radial-gradient(5px at 25% 50%,red 96%,#0000);
  background: var(--g),var(--g) var(--s) calc(var(--s)/2);
  background-size: calc(2*var(--s)) var(--s);
}