Amazing work Amit!

I like it how you build it from the ground up until at some point the illusion pops. It tinkered with it, and it seems like it even works without the stars:

I decided to take on the opportunity and sharpen my CSS grid and selector skills. The first change I made was trying to position the rhombi using CSS grid instead of absolute positioning:

.rumbus-container {
  position: absolute;
  top: -$rumbus-size2;
  left: $rumbus-size;
  display: grid;
  grid-template-columns: repeat(14, $s);
  grid-template-rows: repeat(15, $s);
}

and the resulting pen:

In addition, the alternating rotation pattern of the rhombi and can also be achieved by simple CSS if we just add another hidden rumbus to each line. Then we can use the nth-child() selector and specify that we want to match every other child and rotate it:

.rumbus:nth-child(2n) { 
  transform: rotate(-45deg);
}

finally, we want the pattern to alternate every two lines (and not every single line), so we use the CSS grid column spanning option to make sure that there are 14 rhombi in each odd line, and 15 rhombi in each even line, thus alternating the pattern every other line:

.rumbus:nth-child(29n+14) {
  grid-column: auto / span 2;
}

Basically, the selector matches every 29th rumbus starting from the 14th one (which is the last one on the first line), and makes sure it spans for 2 grid columns, thus making each of the odd lines contain 14 rhumbi, while the even ones will contain 15 rhumbi.

and the resulting pen:

and now, we can write the entire thing even without SASS:

Finally, I decided to re-add the stars, because they are fun!

keeping it in the CSS-only spirit, here is the result:

The trick here is adding a :after element to some rhombi, and drawing the star as a background-image of the element. nth-child() selector proves itself useful again by selecting just the relevant rhombi:

.rumbus:nth-child(29n+16):after,
.rumbus:nth-child(29n+18):after,
.rumbus:nth-child(29n+20):after,
.rumbus:nth-child(29n+22):after,
.rumbus:nth-child(29n+24):after, 
.rumbus:nth-child(29n+26):after {
  ...
}

Basically, since each of the odd lines contain 14 elements, and the even lines contains 15 elements (thus shifting the alternating checkers pattern every two lines), I use an interval of 29n (= 14 + 15), and then, I draw a star for every other element after the 16th. The 16th element is actually the second rumbus in the even lines.

Finally, I noticed that the original pen also rotated the stars by 10 degrees every other line, so I added some CSS to account for that:

.rumbus:nth-child(58n+45):after,
.rumbus:nth-child(58n+47):after,
.rumbus:nth-child(58n+49):after,
.rumbus:nth-child(58n+51):after,
.rumbus:nth-child(58n+53):after,
.rumbus:nth-child(58n+55):after {
  transform: rotate(10deg);
}

and voila! We got the same result, this time with CSS only, and without having to repeat the star svg element multiple times.

This is also a good opportunity to thank Amit Zur again for the great write up, and for inspiring me to sharpen my CSS grid and selector skills. Thank you Amit!