Skip to content

Instantly share code, notes, and snippets.

@tonyhschu
Last active August 29, 2017 15:29
Show Gist options
  • Save tonyhschu/a85c40170368797611f935dd384b5674 to your computer and use it in GitHub Desktop.
Save tonyhschu/a85c40170368797611f935dd384b5674 to your computer and use it in GitHub Desktop.
Messing with Masks
license: mit
<!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; }
</style>
</head>
<body>
<script>
var width = 960
var height = 500
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
document.documentElement.style.setProperty("--x-value", "2px")
var defs = svg.append("defs")
var testMask = defs.append("mask")
.attr("id", "test-mask")
.attr("maskUnits", "userSpaceOnUse")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
testMask.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.attr('fill', "white")
testMask.append('circle')
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('r', 200)
.attr('opacity', 1)
.attr('fill', "black")
var bottomLayer = svg.append('g')
.attr("style", "transform: translate(0,190px) rotateX(60deg)")
var testRect = bottomLayer.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#0000ff")
var limit = 50
var createMask = (id, radius) => {
var m = defs.append("mask")
.attr("id", id)
.attr("maskUnits", "userSpaceOnUse")
.attr("x", -2000)
.attr("y", -1000)
.attr("width", 4000)
.attr("height", 2000)
m.append('rect')
.attr('x', -2500)
.attr('y', -2500)
.attr('width', 5000)
.attr('height', 5000)
.attr('fill', "white")
m.append('circle')
.attr('cx', width / 2)
.attr('cy', height / 3)
.attr('r', radius)
.attr('opacity', 1)
.attr('fill', "black")
}
var recursivelyDrawLayers = (layer, i) => {
if (i < limit) {
var dy = Math.pow(1.085, i) * 0.7
var nextLayer = layer.append('g')
.attr("style", `transition: all 0.03s; transform: translate3D(var(--x-value), ${dy}px, 0)`)
recursivelyDrawLayers(nextLayer, i + 1)
}
var maskId = "mask-" + i
createMask(maskId, 160 + 800 * Math.pow(0.91, i) - i / 3)
var rectFill = (i % 2 === 0) ? "#fff" : "#000"
var rect = layer.append('rect')
.attr('x', -2500)
.attr('y', -2500)
.attr('width', 5000)
.attr('height', 5000)
.attr('fill', rectFill)
.attr("mask", `url(#${maskId})`)
}
recursivelyDrawLayers(bottomLayer, 0)
var pixel = 0
svg.on('mousemove', (e) => {
var m = d3.mouse(svg.node())
var xRatio = m[0] / width
pixel = xRatio * 8 - 4
})
var setStyle = () => {
document.documentElement.style.setProperty("--x-value", `${pixel}px`)
setTimeout(setStyle, 300)
}
setTimeout(setStyle, 300)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment