Skip to content

Instantly share code, notes, and snippets.

@davidguttman
Created October 5, 2018 15:25
Show Gist options
  • Save davidguttman/3c8d0f1613da8363e04a26aaccf62601 to your computer and use it in GitHub Desktop.
Save davidguttman/3c8d0f1613da8363e04a26aaccf62601 to your computer and use it in GitHub Desktop.
<div id='colorsquare'></div>
<script>
var el = window.colorsquare
el.style.cssText = `
width: 200px;
height: 200px;
border: 2px solid black;
`
window.addEventListener('mousemove', function (evt) {
var x = evt.clientX / window.innerWidth
var y = evt.clientY / window.innerHeight
var hue = Math.round(x * 360)
var sat = Math.round(y * 100)
var color = `hsl(${hue}, ${sat}%, 80%)`
el.style.background = color
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment