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)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.