.pattern-1 {
  --s: 200px; /* control the size*/
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;
  
  background:
    repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
     calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
    repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
  background-size: var(--s) calc(var(--s)*tan(30deg));
}

.pattern-2 {
  --s: 100px; /* control the size*/
  --c1: #fff0e5;
  --c2: #025d8c;
  --c3: #e1642a;
  
  --_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);
}

.pattern-3 {
  --s: 100px; /* control the size*/
  --c1: #4ecdc4;
  --c2: #556270;
  
  background: 
    linear-gradient(atan(-.5),var(--c1) 33%,var(--c2) 33.5% 66.5%,var(--c1) 67%) 
    0/var(--s) var(--s);
}

.pattern-4 {
  --s: 100px; /* control the size*/
  --c1: #eceddc;
  --c2: #29ab87;
  
  --_g: var(--c1) 90deg,#0000 90.5deg;
  background:
   conic-gradient(from -45deg,var(--_g)),
   conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
   var(--c2);
  background-size: var(--s) var(--s)
}

.pattern-5 {
  --s: 200px; /* control the size*/
  --c1: #ffffff;
  --c2: #1095c1;
  
  --_g: #0000 8%,var(--c1) 0 17%,#0000 0 58%;
  background: 
    linear-gradient(135deg,#0000 20.5%,var(--c1) 0 29.5%,#0000 0) 0 calc(var(--s)/4),
    linear-gradient( 45deg,var(--_g)) calc(var(--s)/2) 0,
    linear-gradient(135deg,var(--_g),var(--c1) 0 67%,#0000 0),        
    linear-gradient( 45deg,var(--_g),var(--c1) 0 67%,#0000 0 83%,var(--c1) 0 92%,#0000 0),
    var(--c2); 
  background-size: var(--s) var(--s);
}

.pattern-6 {
  --s: 100px; /* control the size*/
  --c1: #1bb0ce;
  --c2: #dad6ca;
  
  --_g1: 
    var(--c1)   calc(25%/3) ,#0000 0 calc(50%/3),
    var(--c1) 0 25%         ,#0000 0 75%,
    var(--c1) 0 calc(250%/3),#0000 0 calc(275%/3),
    var(--c1) 0;
  --_g2: 
    #0000   calc(25%/3) ,var(--c1) 0 calc(50%/3),
    #0000 0 calc(250%/3),var(--c1) 0 calc(275%/3),
    #0000 0;
  background:
    linear-gradient( 45deg,var(--_g2)),linear-gradient( 45deg,var(--_g1)),
    linear-gradient(-45deg,var(--_g2)),linear-gradient(-45deg,var(--_g1))
    var(--c2); /* second color */
  background-position: 0 0,var(--s) var(--s);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}

.pattern-7 {
  --s: 150px; /* control the size*/
  --c1: #046d8b;
  --c2: #2fb8ac;
  
  --_g: #0000 90deg,var(--c1) 0;
  background:
    conic-gradient(from 116.56deg at calc(100%/3) 0   ,var(--_g)),
    conic-gradient(from -63.44deg at calc(200%/3) 100%,var(--_g))
    var(--c2);
  background-size: var(--s) var(--s);
}

.pattern-8 {
  --s: 55px; /* control the size*/
  --c1: #f9f2e7;
  --c2: #88a65e;
  --c3: #bfb35a;
  
  --b: calc(var(--s)/3.67); /* control the thickness of the curved lines */
  
  --_r: calc(1.28*var(--s) + var(--b)/2) at top 50%;
  --_f: calc(99.5% - var(--b)),var(--c1) calc(101% - var(--b)) 99.5%,#0000 101%;
  --_g0: calc(-.8*var(--s)), var(--c2) var(--_f);
  --_g1: calc(-.8*var(--s)), var(--c3) var(--_f);
  --_s: calc(1.8*var(--s) + var(--b));
  background: 
    radial-gradient(var(--_r) right var(--_g0)) calc(-1*var(--_s)) var(--s),
    radial-gradient(var(--_r) left  var(--_g1))         var(--_s)  calc(-1*var(--s)),
    radial-gradient(var(--_r) right var(--_g1)) calc(var(--_s)/-2) calc(-1*var(--s)),
    radial-gradient(var(--_r) left  var(--_g0)) calc(var(--_s)/ 2) var(--s),
    linear-gradient(90deg,var(--c2) 50%,var(--c3) 0);
  background-size: var(--_s) calc(4*var(--s));
}

.pattern-9 {
  --s: 48px; /* control the size*/
  --c1: #d8d8d8;
  --c2: #bb2528;
  --c3: #146b3a;
  
  --b: calc(var(--s)/2.67); /* control the thickness of the wavy line */
  
  --_r: calc(1.28*var(--s) + var(--b)/2) at left 50%;
  --_f: calc(100% - var(--b)),var(--c1) calc(101% - var(--b)) 100%,#0000 101%;
  --g0: calc(-.8*var(--s)),var(--c2) var(--_f);
  --g1: calc(-.8*var(--s)),var(--c3) var(--_f);
  --_s: calc(1.5*var(--s) + var(--b));
  background: 
    radial-gradient(var(--_r) bottom var(--g0)) calc(2*var(--s)) calc(-1*var(--_s)),
    radial-gradient(var(--_r) bottom var(--g1)) calc(-1*var(--s)) calc(var(--_s)/-2),
    radial-gradient(var(--_r) top    var(--g1)) 0 var(--_s),
    radial-gradient(var(--_r) top    var(--g0)) var(--s) calc(var(--_s)/ 2),
    linear-gradient(var(--c2) 50%,var(--c3) 0);
  background-size: calc(4*var(--s)) var(--_s);
}

.pattern-10 {
  --s: 30px; /* control the size*/
  --c1: #e5fcc2;
  --c2: #45ada8;
  
  --_s:37.5% 12.5% at 62.5%;
  --_g:34% 99%,#0000 101%;
  --g1:radial-gradient(var(--_s) 100%,#0000 32%,var(--c1) var(--_g));
  --g2:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c1) var(--_g));
  --g3:radial-gradient(var(--_s) 100%,#0000 32%,var(--c2) var(--_g));
  --g4:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c2) var(--_g));
  background:
    var(--g1),
    var(--g2) 0                calc(3*var(--s)),
    var(--g3) var(--s)         calc(3*var(--s)),
    var(--g4) var(--s)         calc(6*var(--s)),
    var(--g1) calc(2*var(--s)) calc(6*var(--s)),
    var(--g2) calc(2*var(--s)) calc(9*var(--s)),
    var(--g3) calc(3*var(--s)) calc(9*var(--s)),
    var(--g4) calc(3*var(--s)) 0,
    repeating-linear-gradient(var(--c1) 0 25%,var(--c2) 0 50%);
  background-size: calc(4*var(--s)) calc(12*var(--s));
}

.pattern-11 {
  --s: 160px; /* control the size*/
  --c1: #a14016;
  --c2: #cfc89a;
  
  --_g: var(--s) var(--s) 
    radial-gradient(var(--c1) 17%,var(--c2) 18% 35%,#0000 36.5%);
  background: 
    calc(var(--s)/-4) calc(var(--s)/-4)/var(--_g),
    calc(var(--s)/ 4) calc(var(--s)/ 4)/var(--_g),
    radial-gradient(var(--c2) 34%,var(--c1) 36% 68%,#0000 70%) 
     0 0/calc(var(--s)/2) calc(var(--s)/2),
    repeating-linear-gradient(45deg,var(--c1) -12.5% 12.5%,var(--c2) 0 37.5%)
     0 0/var(--s) var(--s);
}

.pattern-12 {
  --s: 20px; /* control the size*/
  --c1: #c7956d;
  --c2: #5e4352;
  
  --c:#0000 46.46%,var(--c1) 0 53.53%,#0000 0;
  --d:calc(10*var(--s)) calc(10*var(--s));
  --g:/var(--d) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
  background:
    conic-gradient(at 40% 40%,#0000 75%,var(--c2) 0) 
     calc(9*var(--s)) calc(9*var(--s))/
     calc(5*var(--s)) calc(5*var(--s)),
    calc(8*var(--s)) calc(8*var(--s)) var(--g),
    calc(3*var(--s)) calc(3*var(--s)) var(--g),
    linear-gradient( 45deg,var(--c)) 0 0/var(--d),
    linear-gradient(-45deg,var(--c)) 0 0/var(--d) var(--c2);
}

.pattern-13 {
  --s: 160px; /* control the size*/
  --c1: #e08e79;
  --c2: #f1d4af;
  --c3: #955e3e;
  
  background:
    conic-gradient(from  15deg at 86.6%,
      var(--c3) 25%,var(--c2) 0 150deg,#0000 0),
    conic-gradient(from -75deg at 50% 13.39%,
      var(--c1) 60deg,var(--c3) 0 150deg,
      var(--c2) 0 210deg,#0000 0),
    conic-gradient(from 15deg at 36.6% 63.4%,
     var(--c1) 60deg,var(--c3) 0 150deg,
     var(--c1) 0 210deg,var(--c2) 0 75%,var(--c3) 0);
  background-size: var(--s) var(--s);
}

.pattern-14 {
  --s: 90px; /* control the size*/
  --c1: #ddd9ab;
  --c2: #e5625c;
  
  --g:#0000 calc(125%/3),var(--c1) 0 calc(175%/3),#0000 0;
  --p:calc(var(--s)/2) calc(var(--s)/2)/calc(2*var(--s)) calc(2*var(--s));
  background:
    radial-gradient(var(--c1) 34%,#0000 36%) 0 0/var(--s) var(--s),
    linear-gradient( 45deg,var(--g)) var(--p),
    linear-gradient(-45deg,var(--g)) var(--p) var(--c2);
}

.pattern-15 {
  --s: 120px; /* control the size*/
  --c1: #53777a;
  --c2: #fc9d9a;
    
  background:
    radial-gradient(var(--c1) 14%,var(--c2) 15% 30%,var(--c1) 31% 44%,var(--c2) 45% 60%,#0000 61%),
    linear-gradient( 45deg,#0000 46%,var(--c2) 0 54%,#0000 0),
    linear-gradient(-45deg,#0000 46%,var(--c2) 0 54%,#0000 0) var(--c1);
  background-size: var(--s) var(--s);
}

.pattern-16 {
  --s: 150px; /* control the size*/
  --c1: #ff847c;
  --c2: #e84a5f;
  --c3: #fecea8;
  --c4: #99b898;
  
  background:
    conic-gradient(from  45deg at 75% 75%, var(--c3) 90deg,var(--c1) 0 180deg,#0000 0),
    conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg,#0000 0),
    conic-gradient(from -45deg at 50% 100%,#0000 180deg,var(--c3) 0),
    conic-gradient(from -45deg,var(--c1) 90deg, var(--c2) 0 225deg,var(--c4) 0);
  background-size: var(--s) var(--s); 
}