html {
  --s: 100px;    /* the size */
  --c1: #fff0e5; /* color 1 */
  --c2: #025d8c; /* color 2 */
  --c3: #e1642a; /* color 3 */
  
  
  --_g: 50%,#0000 37%,var(--c1) 39% 70%,#0000 72%;
  --_t: 50%,var(--c2) 40deg,var(--c3) 0 140deg,var(--c2) 0 180deg,#0000 0; 
  --_s: 47% 50% at;
  background: 
    radial-gradient(var(--_s) -10% var(--_g)) 0 calc(var(--s)/2),
    radial-gradient(var(--_s) -10% var(--_g)) calc(var(--s)/2) 0,
    radial-gradient(var(--_s) 110% var(--_g)),
    radial-gradient(var(--_s) 110% var(--_g)) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(from   0deg at 55% var(--_t)) calc(var(--s)/4) 0,
    conic-gradient(from 180deg at 45% var(--_t)) calc(var(--s)/4) 0,
    var(--c2);
  background-size: 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.