Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
.label {
font-size: 10em;
font-family:"sans-serif";
fill: white;
stroke: black;
stroke-width: 4px;
}
rect {
stroke: black;
stroke-width: 5px;
}
</style>
<title>1600x900 Monitor pairings</title>
</head>
<body>
<svg width="6000" height="2200">
<rect width="1600" height="1200" x="20" y="80" fill="orange" />
<text class="label" x="150" y="1100">1600 x 1200</text>
<rect width="1600" height="900" x="20" y="1300" fill="rgb(100,50,200)"/>
<text class="label" x="150" y="1500">1600 x 900</text>
<rect width="1680" height="1050" x="1660" y="230" fill="blue" />
<text class="label" x="1850" y="1100">1680 x 1050</text>
<rect width="1600" height="900" x="1700" y="1300" fill="rgb(100,50,200)" />
<text class="label" x="1850" y="1500">1600 x 900</text>
<rect width="1920" height="1080" x="3400" y="200" fill="green" />
<text class="label" x="3700" y="1100">1920 x 1080</text>
<rect width="1600" height="900" x="3560" y="1300" fill="rgb(100,50,200)" />
<text class="label" x="3700" y="1500">1600 x 900</text>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment