Skip to content

Instantly share code, notes, and snippets.

@notionparallax
Created October 6, 2016 06:04
Show Gist options
  • Save notionparallax/c5048e469472e7beed31120142ee5306 to your computer and use it in GitHub Desktop.
Save notionparallax/c5048e469472e7beed31120142ee5306 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Training data stickers</title>
</head>
<body>
<style>
text{
font-size:57.83px;
fill:#fff;
font-family:Blender-Bold, Blender;
font-weight:700;
}
body {
padding: 0;
margin: 0;
}
svg {
height: 24%;
width: 24%;
display: inline-block;
}
@media print{
svg {
height: 99.1mm;
width: 67.7mm;
display: inline-block;
}
@page {
/*size: auto;*/
size: a4 landscape;
margin-top: 4.7mm;
margin-bottom: 4.7mm;
margin-left: 13mm;
margin-right: 13mm;
}
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
let allTheSvgs = "";
let row="<tr>"
let numberOfstickersPerRow = 4
for (var i = 1; i <= 400; i++) {
let number = "COW";
if (i<10){ number = `00${i}`;}
else if (i<100){ number = `0${i}`;}
else { number = `${i}`;}
let svgtemplate = `
<svg id="sticker${number}"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 191.91 280.91">
<image width="150"
height="150"
transform="translate(20.95 120)"
xlink:href="https://chart.googleapis.com/chart?chs=400x400&amp;cht=qr&amp;chl=${number}&amp;choe=UTF-8&amp;chld=h|0"/>
<polygon transform="scale(0.8) translate(22 0)"
points="95.95 3.38 163.22 119.6 28.7 119.6 95.95 3.38"/>
<text transform="translate(50.93 100)">${number}</text>
</svg>
`;
row = row + svgtemplate;
if (i%numberOfstickersPerRow==0){
allTheSvgs += row;// + "</tr>";
row = "";
}
}
let theTable = document.createElement('table');
theTable.innerHTML = allTheSvgs;
// var body = document.querySelector("body");
document.body.appendChild(theTable);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment