CodePen Embed - The Anatomy of Tartan -2/2 twill slider

<p>Drag the slider cursor down to weave a tartan</p>
<div class="tartan">
  <svg viewBox="-20 -20 320 320" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="grating" x="0" y="0" width="1" height="1">
        <rect x="0" y="-20" width="100%" height="20" fill="white"/>
        <rect x="0" y="280" width="100%" height="20" fill="white"/>
        <rect style="color: white" x="0" y="0" width="280" height="280" fill="url(#patterndiag)"/>
        <rect x="0" y="280" width="100%" height="20" fill="white"/>
      </mask>
    </defs>
    <g id="horizStripes">
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="0"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="5"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="10"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="15"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="20"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="25"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="30"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="35"/>
      
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="40"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="45"/>
      <rect fill="#FFFFFF" height="5" width="100%" x="-20" y="50"/>
      <rect fill="#FFFFFF" height="5" width="100%" x="-20" y="55"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="60"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="65"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="70"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="75"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="80"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="85"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="90"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="95"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="100"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="105"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="110"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="115"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="120"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="125"/>
      
      <rect fill="#100e17" height="5" width="100%" x="-20" y="130"/>
      <rect fill="#100e17" height="5" width="100%" x="-20" y="135"/>
      <rect fill="#100e17" height="5" width="100%" x="-20" y="140"/>
      <rect fill="#100e17" height="5" width="100%" x="-20" y="145"/>
      
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="150"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="155"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="160"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="165"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="170"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="175"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="180"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="185"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="190"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="195"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="200"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="205"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="210"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="215"/>
      <rect fill="#FFFFFF" height="5" width="100%" x="-20" y="220"/>
      <rect fill="#FFFFFF" height="5" width="100%" x="-20" y="225"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="230"/>
      <rect fill="#E52E71" height="5" width="100%" x="-20" y="235"/>
      
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="240"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="245"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="250"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="255"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="260"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="265"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="270"/>
      <rect fill="#FF8A00" height="5" width="100%" x="-20" y="275"/>
    </g>
    <g id="vertStripes" mask="url(#grating)">
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="0"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="5"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="5"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="5"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="10"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="15"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="20"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="25"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="30"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="35"/>
      
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="40"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="45"/>
      <rect fill="#FFFFFF" width="5" height="100%" y="-20" x="50"/>
      <rect fill="#FFFFFF" width="5" height="100%" y="-20" x="55"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="60"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="65"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="70"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="75"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="80"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="85"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="90"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="95"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="100"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="105"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="110"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="115"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="120"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="125"/>
      
      <rect fill="#100e17" width="5" height="100%" y="-20" x="130"/>
      <rect fill="#100e17" width="5" height="100%" y="-20" x="135"/>
      <rect fill="#100e17" width="5" height="100%" y="-20" x="140"/>
      <rect fill="#100e17" width="5" height="100%" y="-20" x="145"/>
      
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="150"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="155"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="160"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="165"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="170"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="175"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="180"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="185"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="190"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="195"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="200"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="205"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="210"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="215"/>
      <rect fill="#FFFFFF" width="5" height="100%" y="-20" x="220"/>
      <rect fill="#FFFFFF" width="5" height="100%" y="-20" x="225"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="230"/>
      <rect fill="#E52E71" width="5" height="100%" y="-20" x="235"/>
      
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="240"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="245"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="250"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="255"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="260"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="265"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="270"/>
      <rect fill="#FF8A00" width="5" height="100%" y="-20" x="275"/>
      
    </g>
  </svg>
  <input type="range" min="0" max="100" value="0" class="slider" id="sliderRange">
</div>



<svg width="0" height="0">
  <defs>
    <pattern id="patterndiag" x="0" y="0" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="scale(5,5)">
      <polygon points="0,2 1,2 1,4 0,4" fill="white"/>
      <polygon points="1,1 2,1 2,3 1,3" fill="white"/>
      <polygon points="2,0 3,0 3,2 2,2" fill="white"/>
      <polygon points="3,0 4,0 4,1 3,1" fill="white"/>
      <polygon points="3,3 4,3 4,4 3,4" fill="white"/>
    </pattern>  
  </defs> 
</svg>

* {
  box-sizing: border-box;
}

body {
  font-family: Trebuchet MS, sans-serif;
  padding-top: 3rem;
}
p {
  text-align: center;
  margin-bottom: 1.5rem;
}
rect {
  stroke: rgba(0,0,0,.4);
}
svg {
  vertical-align: top;
}
.tartan {
  position: relative;
  margin:  auto;
  width: 320px;
  max-width: calc(100% - 4rem)
}
[id=vertStripes] rect {
  height: 0;
}
.slider {
  width: 100%;
  transform: translate3d(50%, -.5rem, 0) rotate(90deg) translate3d(50%, 0, 0);
  position: absolute;
  top: 0;
  right: -1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}

View Compiled

const vertStripesGroup = document.getElementById("vertStripes")
const stripes = vertStripesGroup.querySelectorAll('rect')
const rangeslider = document.getElementById("sliderRange"); 

console.log(stripes)
rangeslider.oninput = function() {
  stripes.forEach(el => el.style.height = `${this.value}%`)
}

View Compiled

This Pen is owned by Paulina Hetman on CodePen.

See more by @pehaa on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.