<div class="fabrics">
	<div class="swatch argyle">
	</div>
	<div class="swatch houndstooth">
	</div>
	<div class="swatch zigzag">
	</div>
	<div class="swatch madras">
	</div>
</div>

body,
html {
	height: 100%;
	display: grid;
}

.fabrics {
	width: 625px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 310px);
}

.swatch {
	width: 300px;
	height: 300px;
}

/* All Patterns from Lea Verou's CSS3 Patterns Gallery: https://projects.verou.me/css3patterns/ */

.argyle {
	background-color: green;
	background-image: repeating-linear-gradient(
			120deg,
			rgba(22, 105, 255, 1),
			rgba(22, 105, 255, 1) 2px,
			transparent 2px,
			transparent 60px
		),
		repeating-linear-gradient(
			60deg,
			rgba(22, 105, 255, 1),
			rgba(22, 105, 255, 1) 2px,
			transparent 2px,
			transparent 60px
		),
		linear-gradient(
			60deg,
			rgba(21, 105, 55, 1) 25%,
			transparent 60%,
			transparent 40%,
			rgba(0, 0, 0, 0.1) 40%,
			black
		),
		linear-gradient(
			120deg,
			rgba(0, 0, 0, 0.1) 25%,
			transparent 25%,
			transparent 75%,
			rgba(0, 0, 0, 0.1) 75%,
			rgba(0, 0, 0, 0.1)
		);
	background-size: 70px 120px;
}

.houndstooth {
	background: linear-gradient(
				-45deg,
				white 50%,
				transparent 25%,
				transparent 50%,
				black 75%,
				black
			)
			0 0,
		linear-gradient(
				-45deg,
				black 25%,
				transparent 25%,
				transparent 75%,
				white 75%,
				white
			)
			1em 1em,
		linear-gradient(
				45deg,
				black 20%,
				transparent 50%,
				transparent 25%,
				black 65%,
				black 36%,
				transparent 36%,
				transparent 64%,
				black 64%,
				black 85%,
				transparent 45%,
				transparent 53%,
				black 83%
			)
			1em 1em;
	background-color: black;
	background-size: 1em 1em;
}

.zigzag {
	background: linear-gradient(135deg, gold 35%, transparent 35%) -50px 0,
		linear-gradient(225deg, green 35%, transparent 35%) -50px 0,
		linear-gradient(315deg, gold 35%, transparent 35%),
		linear-gradient(45deg, green 35%, transparent 35%);
	background-size: 100px 100px;
	background-color: black;
}

.madras {
	background-color: hsl(134, 53%, 42%);
	background-image: repeating-linear-gradient(
			45deg,
			transparent 5px,
			hsla(7, 2%, 11%, 0.5) 40px,
			hsla(7, 2%, 1%, 0.5) 60px,
			hsla(5, 3%, 3%, 0.5) 80px,
			hsla(5, 3%, 3%, 0.5) 100px,
			hsla(5, 53%, 63%, 0.5) 35px,
			hsla(5, 53%, 63%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 40px,
			hsla(197, 62%, 11%, 0.5) 50px,
			hsla(197, 62%, 11%, 0) 50px,
			hsla(197, 62%, 11%, 0) 60px,
			hsla(5, 53%, 63%, 0.5) 60px,
			hsla(5, 53%, 63%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 80px,
			hsla(35, 91%, 65%, 0) 80px,
			hsla(35, 91%, 65%, 0) 90px,
			hsla(5, 53%, 63%, 0.5) 90px,
			hsla(5, 53%, 63%, 0.5) 10px,
			hsla(5, 53%, 63%, 0) 10px,
			hsla(5, 53%, 63%, 0) 120px,
			hsla(7, 62%, 11%, 0.5) 120px,
			hsla(7, 2%, 11%, 0.5) 140px
		),
		repeating-linear-gradient(
			135deg,
			transparent 5px,
			hsla(7, 62%, 11%, 0.5) 5px,
			hsla(7, 62%, 11%, 0.5) 10px,
			hsla(5, 53%, 63%, 0) 10px,
			hsla(5, 53%, 63%, 0) 35px,
			hsla(5, 53%, 63%, 0.5) 35px,
			hsla(5, 53%, 63%, 0.5) 40px,
			hsla(7, 62%, 11%, 0.5) 40px,
			hsla(7, 62%, 11%, 0.5) 50px,
			hsla(7, 62%, 11%, 0) 50px,
			hsla(197, 62%, 11%, 0) 60px,
			hsla(5, 53%, 63%, 0.5) 60px,
			hsla(5, 53%, 63%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 70px,
			hsla(35, 91%, 65%, 0.5) 80px,
			hsla(35, 91%, 65%, 0) 80px,
			hsla(35, 91%, 65%, 0) 90px,
			hsla(5, 53%, 63%, 0.5) 90px,
			hsla(5, 53%, 63%, 0.5) 110px,
			hsla(5, 53%, 63%, 0) 110px,
			hsla(5, 53%, 63%, 0) 140px,
			hsla(7, 62%, 11%, 0.5) 140px,
			hsla(7, 62%, 11%, 0.5) 160px
		);
}