- l = 0
.bg
  svg(xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" style="filter: blur(20px) grayscale(10%);; opacity: 0.2" preserveAspectRatio="none")
    rect(x=0 y=0 width="100%" height="100%" fill="url(#pattern)")
.wrapper
  main.container(role="image" aria-label="T-shirt design contorlled by the user")
    svg(id="svg" width="100%" height="100%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg")
      defs
        pattern(id="pattern" viewBox="0 0 14 10" width="1" height="1" patternUnits="userBoundingBox")
          circle(class="circle" cx="7" cy="5" r="5" fill="#ddd")
          while l < 10
            line(class="line" style="mix-blend-mode: multiply" stroke=`hsl(${l*1},${l*10}%,${l*4}%)` x1=`${Math.random() * 10}`  y1=`${l % 4 ? l+0.5 : l}` x2=`${l % 2 ? l+10 : l - 5}` y2=`${Math.random() * 10}` stroke-width=`${l*0.4}`)
            - l++
        image(id="t-raster" width="84" height="100" x="6.4" y="2.4" href="https://res.cloudinary.com/makingthings/image/upload/a_hflip/v1588515023/t-anyone/t-shirt.png")
        g(id="t-vector" style="mix-blend-mode:multiply")
          path(transform="translate()"  d="M34 24L39.5 21C40.4219 22.0312 42.6938 24.4938 44.4062 26.0938C46.5469 28.0938 50.1094 28.7344 51.9375 28.8438C53.7656 28.9531 56 28.0625 57.1875 27.4219C58.375 26.7812 61.1719 24.1562 61.9062 23.4375C62.4938 22.8625 63.401 21.4062 63.7812 20.75C66.1042 21.9479 70.7938 24.3844 70.9688 24.5469C71.1875 24.75 74.7188 26.6875 75 27.2969C75.2812 27.9062 76.0312 28.2188 76.375 28.7656C76.7188 29.3125 82.2188 35.25 82.4531 35.4844C82.6875 35.7188 85.0625 37.8281 85.1406 38C85.2188 38.1719 85.0312 38.5625 84.8906 39C84.75 39.4375 84.3594 39.4375 83.75 39.7969C83.1406 40.1562 82.2344 41.1719 81.8125 41.5C81.3906 41.8281 80.4844 42.375 80.3594 42.4375C80.2344 42.5 79.8281 43.0625 79.4062 43.3281C78.9844 43.5938 78.4219 44.0781 78.2812 44.3594C78.1406 44.6406 77.3281 45.5 77.125 45.6719C76.9219 45.8438 76.5625 46.0156 76.25 46.4062C75.9375 46.7969 74.8906 47.2344 74.5 47.4375C74.1094 47.6406 73.7812 48.1719 73.6875 48.5469C73.5938 48.9219 73.8125 49.0312 74.1719 49.1406C74.5312 49.25 74.7812 48.8594 74.9688 48.7031C75.1562 48.5469 75.1562 48.6719 75.1406 48.9375C75.125 49.2031 74.7031 49.4219 74.2812 49.9062C73.8594 50.3906 73.2969 50.7812 72.9688 51.0781C72.7062 51.3156 72.5052 51.8438 72.4375 52.0781C72.5208 52.3385 72.6656 53.0312 72.5781 53.7188C72.4688 54.5781 72.7031 57.5312 72.6875 58.2344C72.6719 58.9375 72.5156 62.8125 72.4531 63.2969C72.3906 63.7812 72.1719 67.625 71.9844 69.4375C71.7969 71.25 71.9531 74.0938 71.9844 74.7188C72.0156 75.3438 71.9531 80.2188 71.8281 81.2344C71.7031 82.25 71.9688 83.7344 72.0625 84.5156C72.1562 85.2969 72.3281 87.3281 72.375 88.3125C72.4125 89.1 72.5781 91.2969 72.6562 92.2969C72.6302 92.3333 72.5531 92.4344 72.4531 92.5469C72.3531 92.6594 71.8802 92.7812 71.6562 92.8281L71.5312 93.3281C71.401 93.3177 70.8937 93.2688 69.9062 93.1562C68.6719 93.0156 67.3125 93.4062 66.2969 93.5469C65.2812 93.6875 64.3438 93.8125 63.3906 93.7188C62.4375 93.625 60.3281 92.7969 59.9844 92.6562C59.6406 92.5156 58.7656 92.6562 58.0938 92.6562C57.4219 92.6562 56.7188 92.375 56.2188 92.6562C55.7188 92.9375 54.7188 93.2344 53.5938 93.1562C52.375 93.1562 51.2812 92.2812 50.875 91.9062C50.4688 91.5312 49.7188 91.4062 48.9688 91.4062C48.2188 91.4062 47.3125 91.375 47 91.7188C46.6875 92.0625 46 91.8125 45.5 92.2812C45 92.75 43.5625 93.1562 41.9375 93.1562C40.3125 93.1562 40.0625 92.9688 39.5625 92.2812C39.0625 91.5938 39.0938 92.5312 38.7188 92.5312C38.3438 92.5312 37.3438 92.5312 36.375 92.7188C35.4062 92.9062 33.7812 93.4062 32.5 93.625C31.475 93.8 30.9479 93.3854 30.8125 93.1562C31.0625 92.8229 31.5625 91.9125 31.5625 90.9375C31.5625 89.7188 31.5 89.3125 31.5625 88.7188C31.625 88.125 32.0312 86.375 32.0312 84.625C32.0312 82.875 32.0625 80.75 32.0312 79.8438C32 78.9375 32.3438 77.2188 32.5 76.375C32.6562 75.5312 32.5 74.8438 32.5 73.5C32.5 72.1562 32.6562 67.4375 32.5 66.7188C32.3438 66 32.4375 62.6562 32.3438 62.0312C32.25 61.4062 32.1562 56.7188 31.9375 55.9062C31.7625 55.2562 32.0104 53.5312 32.1562 52.75C31.875 52.3438 31.275 51.4688 31.125 51.2188C30.9375 50.9062 30.2812 50.4688 30.1562 50.3438C30.0312 50.2188 30.7188 50.0938 31.125 50.0312C31.5312 49.9688 31.25 49.875 31.125 49.25C31 48.625 30.5938 48.4375 30 47.8438C29.4062 47.25 28.6562 46.4375 28.0938 45.9062C27.5312 45.375 27.0625 45.2812 26.7188 45.1562C26.375 45.0312 25.5938 44.125 25.4375 43.9062C25.2812 43.6875 24.0312 42.7188 23.4375 42.2812C22.8438 41.8438 21.4375 40.9062 21.0625 40.5625C20.6875 40.2188 19.2188 39.5625 19.0312 39.5C18.8813 39.45 18.3438 38.9583 18.0938 38.7188C18.2083 38.625 18.4625 38.4125 18.5625 38.3125C18.6875 38.1875 19.3438 37.75 19.875 37.3438C20.4062 36.9375 22.7812 34.6562 23.6562 33.7188C24.5312 32.7812 26.0625 30.1562 26.7188 29.375C27.375 28.5938 28.5625 27.125 28.75 26.875C28.9375 26.625 30.7188 25.6875 31.1562 25.5C31.5063 25.35 33.1979 24.4375 34 24Z" fill="url(#pattern)")
      use(href="#t-raster")
      use(href="#t-vector")
  
  .design(role="form" aria-label="T=Shirt designer")  
    form(class="form" oninput="showVal()")
      label(class="label" for="range") Make your own f<span data-letter="u">*</span><span data-letter="c">*</span><span data-letter="k">*</span><span data-letter="i">*</span><span data-letter="n">*</span>g Tee
      input(type="range" id="range" name="range" min="0" max="10" steps="1" value="5" onchange="showVal(this.value)")

:root
  --color-range-thumb: #000
  --color-range-active: #bbb
  --color-range-rail: #eee


*
  margin 0
  box-sizing border-box
html,body
  height 100%
  font-family 'Special Elite'

.wrapper
  height 100%
  width 100%
  margin 0 auto
  display flex
  flex-direction column
  justify-content space-between
.container
  flex 1 1 60%
.design
  z-index 2
  background-color #fff
  box-shadow: 0px -4px 16px rgba(17,17,26,0.1), 0px -8px 24px rgba(17,17,26,0.1), 0px -16px 56px rgba(17,17,26,0.1);
  flex 1 1 40%
  display flex
  justify-content center
  align-items center
  padding 0.8em 0
  // padding 1em
.form
  width 90%
.form label
  font-family 'Special Elite', cursive
  font-weight normal
  color #ccc
  display block
  font-size 2em
  margin-bottom 2em
  text-align center
  position relative
  & span
    display inline-block
    position relative
    top 10px
  & span:hover::before
    top -10px
    background-color hsl(216, 22%, 30%)
    content attr(data-letter)
    position absolute

.bg
  position fixed
  top 0
  left 0
  width 100vw
  height 100vh
  z-index -1
  & > svg
    width 100%
    height 100%
  
@media all and (min-width: 60em)
  .wrapper
    flex-direction row

const select = e => document.querySelector(e)
const svg = document.getElementById('svg')
const selectAll = e => document.querySelectorAll(e)
const lines = selectAll('.line')
let line = select('.line')
line.setAttribute('x1','0')
const output = select('.output')

// line.setAttribute('x1', 3)
function showVal(newVal){
lines.forEach((line,index) => {
  line.setAttribute('x1', `${ (range.value / 10) / Math.random() * 10}`)
  line.setAttribute('y2', `${Math.random() * 10}`)
  line.setAttribute('stroke', `hsl(${range.value * 30 + Math.random() * 80}, ${Math.random() * 50}%, 30%)`)
  console.log(line.getAttribute('x1'))

})
}