Patterns CSS

html {
--s: 82px; /* control the size */
--c1: #b2b2b2;
--c2: #ffffff;
--c3: #d9d9d9;

--_g: var(--c3) 0 120deg,#0000 0;

background:
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,
var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size: calc(1.732*var(--s)) var(--s);
}

html {
--s: 30px; /* control the size */

--_c: #5E9FA3;
background:
conic-gradient(at 50% calc(100%/6),var(--_c) 60deg,#0000 0),
conic-gradient(at calc(100%/6) 50%,#0000 240deg,var(--_c) 0),
conic-gradient(from 180deg at calc(100%/6) calc(500%/6),var(--_c) 60deg,#0000 0),
conic-gradient(from 180deg at calc(500%/6),#0000 240deg,var(--_c) 0) calc(4*.866*var(--
s)) 0,
repeating-linear-gradient(-150deg,#B05574 0 calc(100%/6),#0000 0 50%),
repeating-linear-gradient(-30deg, #B39C82 0 calc(100%/6),#DCD1B4 0 50%);
background-size: calc(6*.866*var(--s)) calc(3*var(--s))
}

html {
--s: 6px; /* control the size */

--g:#0000 66%,#3B2D38 68% 98%,#0000;

background:
radial-gradient(30% 30% at 0% 30%,var(--g))
var(--s) calc(9*var(--s)),
radial-gradient(30% 30% at 100% 30%,var(--g))
 var(--s) calc(-1*var(--s)),
radial-gradient(30% 30% at 30% 100%,var(--g))
calc(10*var(--s)) 0,
radial-gradient(30% 30% at 30% 0% ,var(--g))
#F02475;
background-size: calc(20*var(--s)) calc(20*var(--s));
}

html {
--s: 37px; /* control the size */

--c:#0000,#2FB8AC .5deg 119.5deg,#0000 120deg;

--g1:conic-gradient(from 60deg at 56.25% calc(425%/6),var(--c));
--g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
--g3:conic-gradient(from -60deg at 50% calc(175%/12),var(--c));
background:
var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s))
#ECBE13;
background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

html {
--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);
}

html {
--s: 124px; /* control the size */
 --g: #90c0b2 0 25%,#f9fbef 0 50%,#0000 0;
background:
conic-gradient(from 135deg at 25% 75%,var(--g))
calc(var(--s)/4) calc(var(--s)/-4),
conic-gradient(from -45deg at 75% 25%,var(--g))
calc(var(--s)/-4) calc(var(--s)/4),
repeating-conic-gradient(var(--g));
background-size: var(--s) var(--s)
}

Good One****

html {
--s: 84px; /* control the size */

--c: #fff;
--a:from -30deg at;
background:
linear-gradient(#0000 50%,#0004 0),
conic-gradient(var(--a) 90%,var(--c) 240deg,#0000 0),
conic-gradient(var(--a) 75%,#71e9a0 240deg,#0000 0),
conic-gradient(var(--a) 25%,#0000 240deg,var(--c) 0),
conic-gradient(var(--a) 40%,var(--c) 240deg,#2a6a9b 0);
background-size: calc(1.5*var(--s)) var(--s);
}

html {
--s: 50px; /* control the size */
--c1: #D9CEB2;
--c2: #948C75;

--_g: calc(2*var(--s)) calc(2*var(--s))

radial-gradient(25% 25%,var(--c1) 99%,#0000 101%);
background:
0 var(--s)/var(--_g),var(--s) 0/var(--_g),
radial-gradient(50% 50%,var(--c2) 97%,#0000)
calc(var(--s)/2) calc(var(--s)/2)/var(--s) var(--s),
linear-gradient(90deg,var(--c1) 50%,var(--c2) 0)
0 0/calc(2*var(--s));
}

html {
background:
repeating-conic-gradient(#F2E9E1 0 45deg,#99B2B7 0 90deg)
 0 0/100px 100px;
}

html {
--s: 100px; /* control the size */
--c1: #FDF1CC;
--c2: #987F69;

--g: var(--c1) 3.125%,var(--c2) 0 9.375%,

var(--c1) 0 15.625%,var(--c2) 0 21.875%,
var(--c1) 0 28.125%,#0000 0;
background:
linear-gradient(225deg,#0000 3.125%,var(--c2) 0 9.375%,
#0000 0 78.125%,var(--c2) 0 84.375%,#0000 0)
0 calc(var(--s)/2),
linear-gradient( 45deg,var(--g)) 0 var(--s),
linear-gradient( 45deg,var(--g)) calc(var(--s)/-2) calc(var(--s)/-2),
linear-gradient(225deg,var(--g)) var(--s) 0,
linear-gradient(225deg,var(--g)) calc(var(--s)/2) var(--s),
repeating-linear-gradient(-45deg,var(--c1) -3.125% 3.125%,var(--c2) 0 9.375%);
background-size: calc(2*var(--s)) calc(2*var(--s));
}

html {
--s: 100px; /* control the size */
--c1: #E1F5C4;
--c2: #3B8183;

--_g:#0000, #0004 5%,

var(--c2) 6% 14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,
var(--c2) 86% 94%,#0004 95%,#0000;
background:
radial-gradient(100% 50% at 100% 0 ,var(--_g)),
radial-gradient(100% 50% at 0 50% ,var(--_g)),
radial-gradient(100% 50% at 100% 100%,var(--_g));
background-size: var(--s) calc(2*var(--s));
}
html {
--s: 80px; /* control the size */
--c: #542437;

--_g:
#0000 calc(-650%/13) calc(50%/13),var(--c) 0 calc(100%/13),
#0000 0 calc(150%/13),var(--c) 0 calc(200%/13),
#0000 0 calc(250%/13),var(--c) 0 calc(300%/13);
--_g0: repeating-linear-gradient( 45deg,var(--_g));
--_g1: repeating-linear-gradient(-45deg,var(--_g));
background:
var(--_g0),var(--_g0) var(--s) var(--s),
var(--_g1),var(--_g1) var(--s) var(--s) #C02942;
background-size: calc(2*var(--s)) calc(2*var(--s));
}

html {
--s: 100px; /* control the size */
--c1: #F8B195;
--c2: #355C7D;

--_g:
var(--c2) 6% 14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86%
94%;
background:
radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
var(--c1);
background-size: var(--s) var(--s);
}

html {
--s: 140px; /* control the size */
--c1: #AB3E5B;
--c2: #FFBE40;

--_g:
#0000 25%,#0008 47%,var(--c1) 53% 147%,var(--c2) 153% 247%,
var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
--_s: calc(25%/3) calc(25%/4) at 50%;
background:
radial-gradient(var(--_s) 100%,var(--_g)),
radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
 radial-gradient(var(--_s) 0 ,var(--_g)) calc(var(--s)/2) 0,
radial-gradient(var(--_s) 0 ,var(--_g)) 0 calc(3*var(--s)/4),
repeating-linear-gradient(90deg,#ACCEC0 calc(25%/-6) calc(25%/6),#61A6AB 0
calc(25%/2));
background-size: var(--s) calc(3*var(--s)/2)
}

html {
--s: 200px; /* control the size */

--_g: #dc9d37 25%,#fed450 0 50%,#0000 0;

--_l1: #fff 0 1px,#0000 0 calc(25% - 1px),#fff 0 25%;
--_l2: #fff 0 1px,#0000 0 calc(50% - 1px),#fff 0 50%;
background:
repeating-linear-gradient( 45deg,var(--_l1)),
repeating-linear-gradient(-45deg,var(--_l1)),
repeating-linear-gradient( 0deg,var(--_l2)),
repeating-linear-gradient( 90deg,var(--_l2)),
conic-gradient(from 135deg at 25% 75%,var(--_g)),
conic-gradient(from 225deg at 25% 25%,var(--_g)),
conic-gradient(from 45deg at 75% 75%,var(--_g)),
conic-gradient(from -45deg at 75% 25%,var(--_g)),
repeating-conic-gradient(#125c65 0 45deg,#bc4a33 0 90deg);
background-size: var(--s) var(--s);
}

html {
--s: 82px; /* control the size */
--c1: #b2b2b2;
--c2: #ffffff;
--c3: #d9d9d9;

--_g: var(--c3) 0 120deg,#0000 0;

background:
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,
var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size: calc(1.732*var(--s)) var(--s);
}

html {
--s: 84px; /* control the size*/
 --c1: #f2f2f2;
--c2: #cdcbcc;
--c3: #999999;

--_g: 0 120deg,#0000 0;
background:
conic-gradient(from 0deg at calc(500%/6) calc(100%/3),var(--c3) var(--_g)),
conic-gradient(from -120deg at calc(100%/6) calc(100%/3),var(--c2) var(--_g)),
conic-gradient(from 120deg at calc(100%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from 120deg at calc(200%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2) 60deg,var(--c1) var(--_g)),
conic-gradient(from 60deg at calc(200%/3) 50%,var(--c1) 60deg,var(--c3) var(--_g)),
conic-gradient(from -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0
240deg,var(--c3) 0);
background-size: calc(var(--s)*1.732) var(--s);
/* sqrt(3) = 1.732 */
}