Skip to content

Instantly share code, notes, and snippets.

@nuklearfiziks

nuklearfiziks/.block

Last active August 19, 2018 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nuklearfiziks/0defb2e1395b58d1c0f2bc1b61df1195 to your computer and use it in GitHub Desktop.
Save nuklearfiziks/0defb2e1395b58d1c0f2bc1b61df1195 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;right:0;bottom:0;left:0;
background-color: #C8AD93;
}
</style>
</head>
<body>
<script>
const {innerHeight, innerWidth} = window;
const svg = d3.select("body").append("svg")
.attr("width", innerWidth)
.attr("height", innerHeight)
const n = 100;
const [cx, cy] = [innerWidth / 2, innerHeight / 2];
const circles = svg.selectAll('circle')
.data(Array(n).fill(null))
.enter()
.append('circle')
.attr('fill', (d, i) => i % 2 ? '#C8AD93' : 'black')
.attr('cx', (d, i) => cx - (cx / (i + 1)))
.attr('cy', (d, i) => cy)
.attr('r', (d, i) => innerHeight / (i + 1))
d3.select('body').on('mousemove', e => {
const { pageX, pageY } = d3.event;
if (pageX > cx) {
circles.attr('cx', (d, i) => cx - (pageX / (i + 1)))
.attr('cy', (d, i) => cy - (pageY / (i + 1)));
} else {
const diff = pageX - cx;
circles.attr('cx', (d, i) => {
const x = cx - (pageX / (i + diff));
if (x !== -Infinity) {
return x;
}
})
.attr('cy', (d, i) => cy - (pageY / (i + 1)));
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment