75 lines
2.3 KiB
HTML
75 lines
2.3 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
svg {
|
|
background-color: darkgray;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
circle {
|
|
fill: red;
|
|
opacity: 0.33;
|
|
}
|
|
|
|
image {
|
|
transform: scale(3.41) rotate(-0.15deg);
|
|
opacity: 0.33;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
|
|
<defs>
|
|
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
|
|
<rect x="0" y="0" width="1in" height="2in" fill="black" />
|
|
<rect x="1in" y="0" width="1in" height="2in" fill="white" />
|
|
</pattern>
|
|
|
|
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
|
|
</defs>
|
|
|
|
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
|
|
<line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
|
|
<rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
|
|
<image href="map1.png" height="6.428in" width="9.971in" />
|
|
</svg>
|
|
|
|
<script>
|
|
var svgns = "http://www.w3.org/2000/svg",
|
|
svg = document.querySelector('svg');
|
|
|
|
var columnCount = 33,
|
|
rowCount = 25,
|
|
pointDistanceInInches = 1.044;
|
|
|
|
var isOdd = n => n % 2 === 1;
|
|
|
|
var columns = [...Array(columnCount).keys()],
|
|
rows = [...Array(rowCount).keys()],
|
|
columnCoords = columns.map(x => x * pointDistanceInInches),
|
|
rowCoords = rows.map(y => y * pointDistanceInInches),
|
|
pointCoords = rowCoords.map((y, index) =>
|
|
(isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y])
|
|
);
|
|
|
|
var xOffset = 0.4,
|
|
yOffset = 0.2;
|
|
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945,
|
|
alternatingOffset = pointDistanceInInches / 2;
|
|
|
|
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
|
|
var circle = document.createElementNS(svgns, 'circle'),
|
|
cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0),
|
|
cy = calcY * y + yOffset;
|
|
|
|
circle.setAttributeNS(null, 'cx', `${cx}in`);
|
|
circle.setAttributeNS(null, 'cy', `${cy}in`);
|
|
circle.setAttributeNS(null, 'r', '0.1in');
|
|
svg.appendChild(circle);
|
|
}));
|
|
</script>
|
|
</body>
|
|
</html> |