YohannesTz/Mountains-Sunset.svg

## index.css
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS Sucks</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app" class="image-container">
        <img id="svg-img" src="Mountains-Sunset.svg" width="100%" height="100%" />
    </div>

    <script src="index.js"></script>
</body>

</html>

## index.js
window.addEventListener('scroll', function () {
  var scrollValue = this.window.scrollY;
  var svgImage = this.document.getElementById('svg-img');
  //svgImage.style.filter = "hue-rotate(" + scrollValue + "deg)";
  var color = interpolateColor(scrollValue, 0, window.innerHeight, '#f5b942', '#4254f5');
  svgImage.style.filter = "hue-rotate(" + colorToDegrees(color) + "deg)";
});

//GPT wrote it
function interpolateColor(value, minValue, maxValue, startColor, endColor) {
  var startRGB = hexToRGB(startColor);
  var endRGB = hexToRGB(endColor);
  var ratio = (value - minValue) / (maxValue - minValue);
  var r = Math.round(startRGB.r + (endRGB.r - startRGB.r) * ratio);
  var g = Math.round(startRGB.g + (endRGB.g - startRGB.g) * ratio);
  var b = Math.round(startRGB.b + (endRGB.b - startRGB.b) * ratio);
  return rgbToHex(r, g, b);
}

function hexToRGB(hex) {
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);
  return { r: r, g: g, b: b };
}

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
}

function colorToDegrees(color) {
  var rgb = hexToRGB(color);
  var hsl = rgbToHSL(rgb.r, rgb.g, rgb.b);
  return hsl.h;
}

function rgbToHSL(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }

  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}


## Mountains-Sunset.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              Mountains-Sunset.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	html,
	body {
	margin: 0;
	padding: 0;
	height: 100%;
	}

	.image-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS Sucks</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<div id="app" class="image-container">
	<img id="svg-img" src="Mountains-Sunset.svg" width="100%" height="100%" />
	</div>

	<script src="index.js"></script>
	</body>

	</html>
	window.addEventListener('scroll', function () {
	var scrollValue = this.window.scrollY;
	var svgImage = this.document.getElementById('svg-img');
	//svgImage.style.filter = "hue-rotate(" + scrollValue + "deg)";
	var color = interpolateColor(scrollValue, 0, window.innerHeight, '#f5b942', '#4254f5');
	svgImage.style.filter = "hue-rotate(" + colorToDegrees(color) + "deg)";
	});

	//GPT wrote it
	function interpolateColor(value, minValue, maxValue, startColor, endColor) {
	var startRGB = hexToRGB(startColor);
	var endRGB = hexToRGB(endColor);
	var ratio = (value - minValue) / (maxValue - minValue);
	var r = Math.round(startRGB.r + (endRGB.r - startRGB.r) * ratio);
	var g = Math.round(startRGB.g + (endRGB.g - startRGB.g) * ratio);
	var b = Math.round(startRGB.b + (endRGB.b - startRGB.b) * ratio);
	return rgbToHex(r, g, b);
	}

	function hexToRGB(hex) {
	var r = parseInt(hex.slice(1, 3), 16);
	var g = parseInt(hex.slice(3, 5), 16);
	var b = parseInt(hex.slice(5, 7), 16);
	return { r: r, g: g, b: b };
	}

	function rgbToHex(r, g, b) {
	return "#" + ((1 << 24) \| (r << 16) \| (g << 8) \| b).toString(16).slice(1);
	}

	function colorToDegrees(color) {
	var rgb = hexToRGB(color);
	var hsl = rgbToHSL(rgb.r, rgb.g, rgb.b);
	return hsl.h;
	}

	function rgbToHSL(r, g, b) {
	r /= 255, g /= 255, b /= 255;
	var max = Math.max(r, g, b), min = Math.min(r, g, b);
	var h, s, l = (max + min) / 2;

	if (max == min) {
	h = s = 0; // achromatic
	} else {
	var d = max - min;
	s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	switch (max) {
	case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	case g: h = (b - r) / d + 2; break;
	case b: h = (r - g) / d + 4; break;
	}
	h /= 6;
	}

	return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
	}