Skip to content

Instantly share code, notes, and snippets.

@leedoughty

leedoughty/index.html

Created April 3, 2018 19:28
Show Gist options
  • Save leedoughty/53600d226c16881200e375b69d57d3e6 to your computer and use it in GitHub Desktop.
Save leedoughty/53600d226c16881200e375b69d57d3e6 to your computer and use it in GitHub Desktop.
Download ZIP
change colours of SVG
Raw
index.html
<!doctype html>
<html>
<head>
<title>interactive Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
</head>
<body>
<!-- <svg id="svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="top" fill="#FFFF00" d="M0 0 L100 0 L85 15 L15 15 z"/>
</svg> -->
<svg id="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g>
<polygon class="green" fill="#0E955E" points="26.194,31.028 26.194,420.618 31.211,420.618 31.211,503.202 159.244,545.218 159.244,420.618
560.009,420.618 560.009,31.028 "/>
<polygon class="green" fill="#0E955E" points="159.244,669.255 159.244,605.231 31.211,627.247 "/>
<polygon class="green" fill="#0E955E" points="159.244,782.987 159.244,730.557 31.211,750.295 "/>
</g>
<polygon class="blue" fill="#48B2E8" points="560.009,626.247 560.009,420.116 502.313,420.116 473.358,391.161 473.358,420.116 446.85,420.116
446.85,350.368 417.839,321.358 417.839,420.116 392.329,420.116 392.329,281.065 363.318,252.055 363.318,420.116 337.309,420.116
337.309,212.595 308.297,185.583 308.297,420.116 282.626,420.116 282.626,143.404 252.277,115.061 129.563,115.061
131.232,212.595 159.244,240.605 159.244,584.97 31.211,543.216 31.211,627.247 159.244,605.231 159.244,710.534 31.211,667.263
31.211,750.295 159.244,730.555 159.244,794.31 236.271,794.31 255.615,794.31 560.009,794.31 560.009,749.295 560.009,722.284
282.626,722.284 282.626,626.247 "/>
<rect x="185.586" y="172.082" class="green" fill="#0E955E" width="28.677" height="28.676"/>
<g>
<path class="pink" fill="#FF8EA2" d="M594.685,16.424h-0.041V-1H-0.776v17.424h-0.04v787.958h0.04v36.85h595.42v-36.85h0.041V16.424z
M31.211,749.295v-82.032l168.712,57.021v-41.682L31.211,627.247v-83.362l168.712,54.021v-41.682L31.211,500.869v-80.753h128.032
V240.605l-28.011-28.01H31.211V31.028h528.797v595.219h-277.72v96.037h277.72v72.025H202.258L31.211,749.295z"/>
<polygon class="pink" fill="#FF8EA2" points="156.908,143.404 156.908,172.082 156.908,200.757 185.586,200.757 185.586,172.082
214.263,172.082 214.263,143.404 185.586,143.404 "/>
<rect x="282.289" y="185.583" class="pink" fill="#FF8EA2" width="26.008" height="234.533"/>
<rect x="337.309" y="252.609" class="pink" fill="#FF8EA2" width="26.01" height="167.507"/>
<rect x="391.829" y="321.134" class="pink" fill="#FF8EA2" width="26.01" height="98.982"/>
<rect x="447.35" y="391.161" class="pink" fill="#FF8EA2" width="26.009" height="28.956"/>
</svg>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
"use strict";
(function() {
var greens, pinks, blues;
function map(num, in_min, in_max, out_min, out_max) {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
function rgb(r, g, b) {
return "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) +")";
// return `rgb(${r},${g},${b})`
}
function onMouseMove(event) {
// fill: rgb(255, 142, 162);
// rgb(255, 235, 59);
var g = map(event.screenX, 0, window.innerWidth, 142, 235);
var b = map(event.screenY, 0, window.innerHeight, 162, 59);
var color = rgb(255, g, b);
console.log(color);
pinks.forEach(function(element){
element.style.fill = color;
})
}
function init() {
greens = Array.prototype.slice.call(
document.getElementsByClassName("green")
);
pinks = Array.prototype.slice.call(document.getElementsByClassName("pink"));
blues = Array.prototype.slice.call(document.getElementsByClassName("blue"));
window.addEventListener("mousemove", onMouseMove);
}
init();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment