html {
  --s: 162px; /* control the size */
  
  --_g: conic-gradient(from 30deg at 50% 25%,#0000 300deg,#cd2942 0);
  background:
    var(--_g) calc(0.2885*var(--s)) calc(7*var(--s)/12),
    var(--_g) 0 calc(var(--s)/12),
    conic-gradient(from 120deg at 50% calc(250%/3),#62928c 120deg,#0000 0),
    repeating-conic-gradient(from 30deg,#0000 0 60deg,#e8cba9 0 120deg),
    repeating-conic-gradient(#33152e 0 60deg,#62928c 0 120deg,#414352 0 180deg)
    /* OR the below can replace both repeating gradient 
    conic-gradient(from -30deg,
        #e8cba9    60deg,#33152e 0  90deg,#62928c 0 120deg,
        #e8cba9 0 180deg,#414352 0 210deg,#33152e 0 240deg,
        #e8cba9 0 300deg,#62928c 0 330deg,#414352 0)*/;
  background-size: calc(0.577*var(--s)) var(--s)
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.