I associated the houndstooth pattern with childhood. Because I remember seeing it everywhere when I was little, but suddenly disappear and not seeing anywhere.
From a CSS perspective, the pattern is really simple and it can be created with just two gradients:
- Conic gradient to generate a white and black box pattern
- Repeating linear gradient (or just a linear gradient if you prefer) to generate the diagonal lines
For simplicity, I recommend having a custom property for the size, so it's easier to change the size by updating a single point in the code, instead of two… so really, not so necessary, but still convenient.
Here's a video generating the pattern in real time with CSS:
And here's the source code. And don't forget to change the value of the custom property --size to adjust it to your needs:
body {
--size: 100px;
background-size: var(--size) var(--size);
background-image:
conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
repeating-linear-gradient(
135deg,
#fff 0 12.5%, #000 0 25%, #fff 0 37.5%, #000 0 62.5%
);
}
And that's how you draw a houndstooth pattern with CSS :)