Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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