Background pattern - star shape

A multiple backgrounds trick to create a star pattern.

Code structure

html {
  --s: 90px; /* size */
  --m: 5px;  /* space */

  --v1:transparent,#fff 0.5deg 108deg,transparent 109deg;
  --v2:transparent,red  0.5deg  36deg,transparent  37deg;
  background:
    /* 4 */
    conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
    /* 3 */
    conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--v1)),
    /* 2 */
    conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--v2)),
    /* 1 */
    conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2))
    #fff;

  background-size: calc(var(--s) + var(--m)) calc(var(--s) + var(--m));
}

A step-by-step illustration to understand how the pattern is created:

That's it!

All you have to do is to adjust both variables (s and m) to control the shape (the sizing and the spacing).