<div class='line'>
    <svg class='img' width="10" height="300" viewBox="0 0 10 300" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="300" rx="4" fill="url(#paint0_linear_1633_114613)"/>
  <defs>
  <linearGradient id="paint0_linear_1633_114613" x1="5" y1="0" x2="5" y2="300" gradientUnits="userSpaceOnUse">
  <stop stop-color="#003822"/>
  <stop offset="1" stop-color="#003822" />
  </linearGradient>
  </defs>
</svg>

</div>

.line {
  width: 10px;
  height: 300px;
  border: 2px solid black;
  display: flex;
  align-items: flex-end;
}

.img {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}

.img stop {
  transition: all 0.2s;
}

function changeSVGValuesPeriodically() {
  let height = 300;
  let decreasing = true; 
  const interval = setInterval(() => {
    console.log("Current height:", height);

    let gradientColor;
    if (height >= 0 && height < 100) {
      gradientColor = "#FF0000";
    } else if (height >= 100 && height < 200) {
      gradientColor = "#FF6600"; 
    } else {
      gradientColor = "#003822"; 
    }

    if (decreasing) {
      height -= 10;
      if (height <= 0) {
        decreasing = false;
      }
    } else {
      height += 10;
      if (height >= 300) {
        decreasing = true;
      }
    }

    const svgElement = document.querySelector('.line svg');
    const rectElement = document.querySelector('.line rect');
    const imgElement = document.querySelector('.img');
    svgElement.setAttribute('height', height);
    svgElement.setAttribute('viewBox', `0 0 10 ${height}`);
    const gradientElement = document.querySelector('#paint0_linear_1633_114613');
    gradientElement.querySelector('stop').setAttribute('stop-color', gradientColor);
    gradientElement.querySelector('stop').setAttribute('offset', height / 300);
    rectElement.setAttribute('height', height);
    imgElement.style.height = `${height}px`;
  }, 200); 
}

changeSVGValuesPeriodically();