Skip to content

Instantly share code, notes, and snippets.

Last active Nov 27, 2018
What would you like to do?
license: gpl-3.0
<!DOCTYPE html>
body {
margin: 0;
#hole rect {
fill: white;
#hole circle {
fill: black;
.foreground {
fill: tomato;
.background {
fill: steelblue;
<mask id="hole">
<rect class="foreground"></rect>
<rect class="background" mask="url(#hole)"></rect>
<script src=""></script>
function draw(){
var width = window.innerWidth;
var height = window.innerHeight;"svg").attr("width", width).attr("height", height);"#hole rect").attr("width", width).attr("height", height);"#hole circle").attr("cx", width / 2).attr("cy", height / 2).attr("r", Math.min(width, height) / 2);".foreground").attr("width", width).attr("height", height);".background").attr("width", width).attr("height", height);
window.onload = draw;
window.onresize = draw;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment