.b1 {
    --s: 10px; /* control the size */
  
    /* --_g: #0000 90deg,#046D8B 0; */
    --_g: #73b471 90deg,#ffd413 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))
      #2FB8AC;
    background-size: var(--s) var(--s);
}

.b2 {
    --s: 10px; /* control the size */
    --_g: #0000 90deg,#046D8B 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))
      #2FB8AC;
    background-size: var(--s) var(--s);
}


.b3 {
    --s: 6px; /* control the size */
    /* --g: repeating-conic-gradient(#774F38 0 25%,#ECE5CE 0 50%) 0/; */
    --g: repeating-conic-gradient(#2FB8AC 0 25%,#ECE5CE 0 50%) 0/;
    background:
      var(--g) calc(1*var(--s)) calc(7*var(--s)),
      var(--g) calc(2*var(--s)) calc(5*var(--s)),
      var(--g) calc(3*var(--s)) calc(3*var(--s)),
      var(--g) calc(5*var(--s)) calc(2*var(--s)),
      var(--g) calc(7*var(--s)) calc(1*var(--s));
    background-blend-mode: darken;
}

.b4 {
    --u: 4px; 
	--s: calc(var(--u) * 6);
	--c0: #111111b5;
	--c1: #b871f1de;
	--c2: #4cbee0;
	--gp: 50%/calc(var(--u) * 50) calc(var(--u) * 60);
	--bp: calc(var(--u) * -12.5) calc(var(--u) * -30);
	height: 100vh;
	--bg: 
		radial-gradient(circle at 76.15% 0%, var(--c2) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at 26.05% 0%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp), 
		radial-gradient(circle at 74% 1%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		radial-gradient(circle at 24% 1%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		conic-gradient(from 0deg at 77% 26%, var(--c1) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 75% 26%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 27% 26%, var(--c2) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from -90deg at 25% 26%, var(--c1) 0 25%, var(--c0) 0 50%, #fff0 0 100%) var(--gp),
		linear-gradient(0deg, #fff0 0 74%, var(--c2) 0 100%) var(--gp),
		radial-gradient(circle at 0.75% 25%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp), 
		radial-gradient(circle at 51.15% 25%, var(--c2) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at 100.85% 25%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at -0.5% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		radial-gradient(circle at 49.25% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),  
		radial-gradient(circle at 98.5% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		conic-gradient(from 0deg at 52% 50%, var(--c1) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 50% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 2% 50%, var(--c2) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from -90deg at 0% 50%, var(--c1) 0 25%, var(--c0) 0 50%, #fff0 0 100%) var(--gp);
	background: var(--bg), var(--bg), var(--c2);
	background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),	0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.b5 {
    --u: 4px; 
	--s: calc(var(--u) * 6);
	--c0: #111111b5;
	--c1: #b871f1de;
	--c2: #4cbee0;
	--gp: 50%/calc(var(--u) * 50) calc(var(--u) * 60);
	--bp: calc(var(--u) * -16.5) calc(var(--u) * -30);
	height: 100vh;
	--bg: 
		radial-gradient(circle at 90.15% 0%, var(--c2) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at 19.05% 0%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp), 
		radial-gradient(circle at 16% 1%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		radial-gradient(circle at 25% 1%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		conic-gradient(from 0deg at 96% 26%, var(--c1) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 99% 26%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 27% 26%, var(--c2) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from -90deg at 25% 26%, var(--c1) 0 25%, var(--c0) 0 50%, #fff0 0 100%) var(--gp),
		linear-gradient(0deg, #fff0 0 74%, var(--c2) 0 100%) var(--gp),
		radial-gradient(circle at 0.75% 25%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp), 
		radial-gradient(circle at 51.15% 25%, var(--c2) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at 55.85% 25%, var(--c1) 0 var(--s), #fff0 calc(var(--s) + 1px) 100%) var(--gp),
		radial-gradient(circle at -0.5% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		radial-gradient(circle at 49.25% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),  
		radial-gradient(circle at 98.5% 26%, var(--c0) 0 var(--s), #fff0 calc(var(--s) + 2px) 100%) var(--gp),
		conic-gradient(from 0deg at 52% 50%, var(--c1) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 50% 99%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 0deg at 69% 66%, var(--c2) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from -90deg at 5% 50%, var(--c1) 0 25%, var(--c0) 0 50%, #fff0 0 100%) var(--gp);
	background: var(--bg), var(--bg), var(--c2);
	background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp),	0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.b6 {
    --s: 20px; /* control the size */
    --n: 50px;
    --_g: #0000 90deg,#2FB8AC 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))
      #046D8B;
    background-size: var(--s) var(--n);

}

.b7 {
    --sz: 5px;
	--c0: #000;
	/* --c1: #118dc7; */
    --c1: #4a520646;
	--ts: 50%/ calc(var(--sz) * 20) calc(var(--sz) * 16);
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	--dot: var(--c1) 0 calc(var(--sz) * 0.78), #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
	--dot2: 
		radial-gradient(circle at 90% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 0%, var(--dot)) var(--ts);
	--cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg3: conic-gradient(from -90deg at 30% 38.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg4: conic-gradient(from -90deg at 50% 37.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg7: conic-gradient(from -90deg at 80% 13.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg8: conic-gradient(from -90deg at 100% 12.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);

	background:
		var(--dot2), var(--dot2),
		radial-gradient(circle at 90% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 90% 12.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 25%,   var(--dot)) var(--ts),
		radial-gradient(circle at 40% 37.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 50%,   var(--dot)) var(--ts),
		var(--cg1), var(--cg1),	var(--cg2), var(--cg2),
		var(--cg3), var(--cg3),	var(--cg4), var(--cg4),
		var(--cg5), var(--cg5),	var(--cg6), var(--cg6),
		var(--cg7), var(--cg7),	var(--cg8), var(--cg8),
		linear-gradient(-45deg, #fff0 0 32.25% , #0002 50%, #000 77.5%) var(--ts),
		linear-gradient(-45deg, #fff0 0 32.25% , #000 60%) var(--ts),
		repeating-linear-gradient(90deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}

.b8 {
    --sz: 5px;
	--c0: #ffffff;
	/* --c1: #118dc7; */
    --c1: #118dc7; 
	--ts: 50%/ calc(var(--sz) * 20) calc(var(--sz) * 16);
	margin: 5;
	padding: 90;
	height: 100vh;
	overflow: hidden;
	--dot: var(--c1) 0 calc(var(--sz) * 1.78), #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
	--dot2: 
		radial-gradient(circle at 90% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 0%, var(--dot)) var(--ts);
	--cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg3: conic-gradient(from -90deg at 30% 38.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg4: conic-gradient(from -90deg at 50% 37.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg7: conic-gradient(from -90deg at 80% 13.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg8: conic-gradient(from -90deg at 100% 12.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);

	background:
		var(--dot2), var(--dot2),
		radial-gradient(circle at 90% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 90% 12.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 25%,   var(--dot)) var(--ts),
		radial-gradient(circle at 40% 37.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 50%,   var(--dot)) var(--ts),
		var(--cg1), var(--cg1),	var(--cg2), var(--cg2),
		var(--cg3), var(--cg3),	var(--cg4), var(--cg4),
		var(--cg5), var(--cg5),	var(--cg6), var(--cg6),
		var(--cg7), var(--cg7),	var(--cg8), var(--cg8),
		linear-gradient(-45deg, #fff0 0 32.25% , #0002 50%, #000 77.5%) var(--ts),
		linear-gradient(-45deg, #fff0 0 32.25% , #000 60%) var(--ts),
		repeating-linear-gradient(90deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}

.b9 {
    --sz: 5px;
	--c0: #cc8c8cde;
	/* --c1: #118dc7; */
    --c1: #118dc7;
	--ts: 50%/ calc(var(--sz) * 20) calc(var(--sz) * 10);
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	--dot: var(--c1) 0 calc(var(--sz) * 0.78), #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
	--dot2: 
		radial-gradient(circle at 90% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 0%, var(--dot)) var(--ts);
	--cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg3: conic-gradient(from -90deg at 30% 38.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg4: conic-gradient(from -90deg at 50% 37.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg7: conic-gradient(from -90deg at 80% 13.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg8: conic-gradient(from -90deg at 100% 12.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);

	background:
		var(--dot2), var(--dot2),
		radial-gradient(circle at 90% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 40% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 90% 12.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 65% 25%,   var(--dot)) var(--ts),
		radial-gradient(circle at 40% 37.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 15% 50%,   var(--dot)) var(--ts),
		var(--cg1), var(--cg1),	var(--cg2), var(--cg2),
		var(--cg3), var(--cg3),	var(--cg4), var(--cg4),
		var(--cg5), var(--cg5),	var(--cg6), var(--cg6),
		var(--cg7), var(--cg7),	var(--cg8), var(--cg8),
		linear-gradient(-45deg, rgba(182, 238, 235, 0.856) 0 32.25% , #0002 50%, #dda0d3e8 77.5%) var(--ts),
		linear-gradient(-45deg, #fff0 0 32.25% , #000 60%) var(--ts),
		repeating-linear-gradient(90deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}

.b10 {
    --sz: 50px;
	--c0: #cc8c8cde;
	/* --c1: #118dc7; */
    --c1: #118dc7;
	--ts: 50%/ calc(var(--sz) * 20) calc(var(--sz) * 10);
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	--dot: var(--c1) 0 calc(0px), #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
	--dot2: 
		radial-gradient(circle at 0% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 0%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 0%, var(--dot)) var(--ts);
	--cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg3: conic-gradient(from -90deg at 30% 38.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg4: conic-gradient(from -90deg at 50% 37.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
	--cg7: conic-gradient(from -90deg at 80% 13.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
	--cg8: conic-gradient(from -90deg at 100% 12.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);

	background:
		var(--dot2), var(--dot2),
		radial-gradient(circle at 0% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 100%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 12.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 25%,   var(--dot)) var(--ts),
		radial-gradient(circle at 0% 37.5%, var(--dot)) var(--ts),
		radial-gradient(circle at 0% 50%,   var(--dot)) var(--ts),
		var(--cg1), var(--cg1),	var(--cg2), var(--cg2),
		var(--cg3), var(--cg3),	var(--cg4), var(--cg4),
		var(--cg5), var(--cg5),	var(--cg6), var(--cg6),
		var(--cg7), var(--cg7),	var(--cg8), var(--cg8),
		linear-gradient(-45deg, rgba(182, 238, 235, 0.856) 0 32.25% , #0002 50%, #dda0d3e8 77.5%) var(--ts),
		linear-gradient(-45deg, #fff0 0 32.25% , #000 60%) var(--ts),
		repeating-linear-gradient(20deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}

.b11 {
    background: linear-gradient(to bottom right, #f85032, #e73827);
}

.b12 {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

.b13 {
    background: radial-gradient(circle, #6a11cb, #2575fc);
}

.b14 {
    background: linear-gradient(120deg, #89f7fe, #66a6ff);
}

.b15 {
    background: linear-gradient(to right, #ffecd2, #fcb69f);
}

.b16 {
    background: conic-gradient(from 90deg, #ff9a9e, #fad0c4);
}

.b17 {
    background: repeating-linear-gradient(45deg, #f5af19, #f12711 10px, #f5af19 20px);
}

.b18 {
    background: linear-gradient(to bottom, #30cfd0, #330867);
}

.b19 {
    background: repeating-radial-gradient(circle, #84fab0, #8fd3f4 15px);
}

.b20 {
    background: radial-gradient(ellipse at top left, #eecda3, #ef629f);
}

.b21 {
    background: conic-gradient(from 0deg, #ffe259, #ffa751);
}

.b22 {
    background: linear-gradient(to right top, #373b44, #4286f4);
}