Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html22
1 files changed, 16 insertions, 6 deletions
diff --git a/index.html b/index.html
index 23174d2..adccce5 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,22 @@
background-color: darkgray;
}
+ body {
+ margin: 0;
+ }
+
circle {
fill: red;
}
+
+ image {
+ transform: scale(3.41);
+ opacity: 0.33;
+ }
</style>
</head>
<body>
- <svg viewbox="-50 -50 3450 2450" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
+ <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" />
@@ -21,18 +30,19 @@
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
</defs>
- <line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" />
- <line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" />
+ <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 = 34,
+ var columnCount = 33,
rowCount = 25,
- pointDistanceInInches = 1.015;
+ pointDistanceInInches = 1.05;
var isOdd = n => n % 2 === 1;
@@ -46,7 +56,7 @@
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'),
- calcY = Math.sqrt(3) * pointDistanceInInches / 2;
+ calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.93;
if (isOdd(index)) {
var alternatingOffset = pointDistanceInInches / 2;