Instantly share code, notes, and snippets.

@davidguttman /cs4.html Secret
Created Oct 11, 2018

Embed
What would you like to do?
<div id='colorsquare4' style='width: 200px; height: 200px; position: relative'></div>
<script>
var cs4 = window.colorsquare4
var els = ([[0, 0], [1, 0], [0, 1], [1, 1]]).map(function (xy) {
var el = document.createElement('div')
el.style.cssText = `
position: absolute;
left: ${xy[0] * 100}px;
top: ${xy[1] * 100}px;
width: 100px;
height: 100px;
border: 2px solid black;
`
cs4.appendChild(el)
return el
})
window.addEventListener('mousemove', function (evt) {
var x = evt.clientX / window.innerWidth
var y = evt.clientY / window.innerHeight
els.forEach(function (el, i) {
var elX = x + (i * 0.01)
var elY = y + (i * 0.1)
var hue = Math.round(elY * 360)
var light = Math.round(elX * 100)
var w = `${elX * 100}px`
var h = `${elY * 100}px`
var trans = `rotate(${elX * 360}deg)`
var color = `hsl(${hue}, 100%, ${light}%)`
el.style.background = color
el.style.width = w
el.style.height = h
el.style.transform = trans
})
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment