html {
  --s: 120px; /* the size */
  
  --_c: #72e21f /* color 1 */ 25%,#0000 0;
  --_g1: conic-gradient(at 62.5% 12.5%,var(--_c));
  --_g2: conic-gradient(at 87.5% 62.5%,var(--_c));
  --_g3: conic-gradient(at 25%   12.5%,var(--_c));
  background:
    var(--_g1) calc( var(--s)/-8) calc(var(--s)/2),var(--_g1) calc(-3*var(--s)/8) calc(var(--s)/4),
    var(--_g2) calc(3*var(--s)/8) calc(var(--s)/4),var(--_g2) calc(  var(--s)/-8) 0,
    var(--_g3) 0 calc(var(--s)/-4),var(--_g3) calc(var(--s)/-4) 0,
    conic-gradient(at 87.5% 87.5%,var(--_c)) calc(var(--s)/8) 0
    #044012; /* color 2 */
  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.