Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active November 27, 2018 17:35
Show Gist options
  • Save HarryStevens/afa509b72ef8c08cdc0a5eddeeeab8f8 to your computer and use it in GitHub Desktop.
Save HarryStevens/afa509b72ef8c08cdc0a5eddeeeab8f8 to your computer and use it in GitHub Desktop.
Download ZIP
Mask
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#hole rect {
fill: white;
}
#hole circle {
fill: black;
}
.foreground {
fill: tomato;
}
.background {
fill: steelblue;
}
</style>
</head>
<body>
<svg>
<mask id="hole">
<rect></rect>
<circle></circle>
</mask>
<rect class="foreground"></rect>
<rect class="background" mask="url(#hole)"></rect>
</svg>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script>
function draw(){
var width = window.innerWidth;
var height = window.innerHeight;
d3.select("svg").attr("width", width).attr("height", height);
d3.select("#hole rect").attr("width", width).attr("height", height);
d3.select("#hole circle").attr("cx", width / 2).attr("cy", height / 2).attr("r", Math.min(width, height) / 2);
d3.select(".foreground").attr("width", width).attr("height", height);
d3.select(".background").attr("width", width).attr("height", height);
}
window.onload = draw;
window.onresize = draw;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment