<p>Lightweight versions (between a third and a half the size) of the patterns from the starter Pen.</p>

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

@use 'sass:math';

.fabrics {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fit, min(21em, 100%));
  justify-content: center
}

.swatch { aspect-ratio: 1/ 1 }

.argyle {
  $rha: 60deg;
  $cga: -.5*$rha;
  $lga: 90deg - .5*$rha;
  $rhl: 4em;
  $rhw: 2*$rhl*math.sin(.5*$rha);
  $rhh: 2*$rhl*math.cos(.5*$rha);
  $lno: .5px;
  
  --l: transparent calc(50% - #{$lno}), hsla(0, 0%, 100%, .1) 0  calc(50% + #{$lno}), transparent 0;
  background:
    linear-gradient($lga, var(--l)), 
    linear-gradient(-$lga, var(--l)), 
    repeating-conic-gradient(from $cga, 
        #6d695c 0% $rha, #615e52 0% 50%) .5*$rhw 0;
  background-size: $rhw $rhh
}

.houndstooth {
  $l: 1em;
  $d: $l*math.sqrt(2);
  background: 
    conic-gradient(transparent 25%, 
        #fff 0% 50%, transparent 0% 75%, #000 0%) 
      -.25*$l 0/#{2*$l 2*$l}, 
    repeating-linear-gradient(45deg, 
        #000 0 .25*$d, #fff 0 .5*$d);
}

.zigzag {
  $size: 7em;
  background: 
    conic-gradient(from 135deg, #eceddc 25%, transparent 0%), 
    conic-gradient(from -45deg, #eceddc 25%, #ec173a 0%) 
      .5*$size 0;
  background-size: $size $size
}

.madras {
  --l: transparent 5px,
    hsla(197, 62%, 11%, .5) 0 10px,
    transparent 0 35px,
    hsla(5, 53%, 63%, .5) 0 40px,
    hsla(197, 62%, 11%, .5) 0 50px,
    transparent 0 60px,
    hsla(5, 53%, 63%, .5) 0 70px,
    hsla(35, 91%, 65%, .5) 0 80px,
    transparent 0 90px,
    hsla(5, 53%, 63%, .5) 0 110px,
    transparent 0;
  background: 
    repeating-linear-gradient(45deg,
      var(--l) 120px, hsla(197, 62%, 11%, .5) 0 140px),
    repeating-linear-gradient(135deg,
      var(--l) 140px, hsla(197, 62%, 11%, .5) 0 160px) 
    #e9d4b9
}