<div class="container-fluid h-100 bg-light">
  <div class="row vh-100 text-center">
    <div class="col-12 col-md-4 pt-4 border-end">
      <h2>Gradient guide</h2>
      
      <p>Explore the slope components of a linear gradient in SVG, the red line will show you where the gradient axis is</p>
      
      <div class="row m-0 pt-2">
        <ul class="list-group mb-2 ps-2">
          <li class="list-group-item row d-flex m-0">
            
            <div class="col-6 d-flex align-items-center">
              <label for="c1" class="form-label mb-0 me-2">Color 1</label>
              <input type="color" class="form-control form-control-color col-auto" id="c1" value="#6815e5" title="Choose your color">
            </div>
            
            <div class="col-6 d-flex align-items-center">
              <label for="c2" class="form-label mb-0 me-2">Color 2</label>
              <input type="color" class="form-control form-control-color col-auto" id="c2" value="#d80ebd" title="Choose your color">
            </div>
                     
          </li>
        </ul>
        
        <ul class="list-group mb-2 ps-2">
          <li class="list-group-item">
            <label for="x1" class="form-label">X1 range: <span>0</span>%</label>
            <input type="range" class="form-range svg-control" id="x1" value="0" min="0" max="100">
          </li>
        </ul>
        
        <ul class="list-group mb-2 ps-2">
          <li class="list-group-item">
            <label for="x2" class="form-label">X2 range: <span>100</span>%</label>
            <input type="range" class="form-range svg-control" id="x2" value="100" min="0" max="100">
          </li>
        </ul>
        
        <ul class="list-group mb-2 ps-2">
          <li class="list-group-item">
            <label for="y1" class="form-label">Y1 range: <span>0</span>%</label>
            <input type="range" class="form-range svg-control" id="y1" value="0" min="0" max="100">
          </li>
        </ul>
        
        <ul class="list-group mb-2 ps-2">
          <li class="list-group-item">
            <label for="y2" class="form-label">Y2 range: <span>0</span>%</label>
            <input type="range" class="form-range svg-control" id="y2" value="0" min="0" max="100">
          </li>
        </ul>
        
      </div>
    </div>
    
    <div class="col-12 col-md-8 d-flex justify-content-center align-items-center">
      <div id="preview" class="m-auto">
        
      
      
      <svg id="source" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="100" height="100" fill="url(#g1)" />
        
        <linearGradient x1="0%" x2="100%" y1="100%" y2="100%" id="g1">
          <stop id="s1" offset="0%" stop-color="black" />
          <stop id="s2" offset="100%" stop-color="yellow" />
        </linearGradient>
      </svg>
      
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id="guide">
        <line id="gl" x1="0" x2="0" y1="0" y2="0" stroke="red"></line>
      </svg>
        
        <div class="row mt-2">
          <label for="ta" class="form-label">Copy your HTML code:</label>
          <textarea class="form-control" id="ta" rows="3"></textarea>
        </div>
      </div>
      
      
      
    </div>
  </div>
</div>

.vh-100{
  height: 100vh !important;
}

#preview{
  height: 300px;
  width: 300px;
  position: relative;
}

#guide{
  position: absolute;
  top: 0;
  left: 0;
}
svg{
  height: 100%;
}

$(document).ready(()=>{
  svg_c_init();
  svg_xy_init();
  
  $('.form-control-color').on('input change', ()=>{
    svg_c_init();
  });
  
  $('.svg-control').on('input change', (e)=>{
    svg_xy_init();
    
    let i = $(e.target).attr('id');
    $( 'label[for="'  + i + '"] span' ).text( $(e.target).val() );
  });
});

function svg_c_init(){
  let c1 = $('#c1').val();
  let c2 = $('#c2').val();
  
  $('#s1').attr('stop-color', c1);
  $('#s2').attr('stop-color', c2);
  
  svg_text_init();
}

function svg_xy_init(){
  let x1 = $('#x1').val() + '%';
  let x2 = $('#x2').val() + '%';
  let y1 = $('#y1').val() + '%';
  let y2 = $('#y2').val() + '%';
  
  $('#g1').attr({x1: x1, x2: x2, y1: y1, y2: y2});
  
  $('#gl').attr({x1: x1, x2: x2, y1: y1, y2: y2});
  
  svg_text_init();
}

function svg_text_init(){
  let h = document.querySelector('#source').outerHTML.replaceAll('\n', '').trim();
  $('#ta').val(h);
}