The ruler is a background-repeat-repeated GIF, included for measurement purposes. As you might expect.
Each red pattern is a background-repeat-repeated PNG which alternates half-transparent red and full transparency.
Each initial blue pattern (lrg) is a repeating-linear-gradient of the form…
repeating-linear-gradient(left, rgba(0,0,255,0.5) 0px, rgba(0,0,255,0.5) 1px, transparent 1px, transparent 2px);
…where the lengths are multiplied by the number of each test. Thus, for test 6, they are 0px, 6px, 6px, and 12px, respectively.
Each second blue pattern (lrg2) is a repeating-linear-gradient of the form…
repeating-linear-gradient(left, rgba(0,0,255,0.5) 1px, transparent 1px, transparent 2px, rgba(0,0,255,0.5) 2px, rgba(0,0,255,0.5) 3px);
…where the lengths are multiplied by the number of each test. Thus, for test 6, they are 6px, 12px, 12px, and 18px, respectively.