ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map image

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-17 18:50:47 -07:00
parent 50372d16a9
commit 3a1a981506
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -5,13 +5,22 @@
background-color: darkgray; background-color: darkgray;
} }
body {
margin: 0;
}
circle { circle {
fill: red; fill: red;
} }
image {
transform: scale(3.41);
opacity: 0.33;
}
</style> </style>
</head> </head>
<body> <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> <defs>
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse"> <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="0" y="0" width="1in" height="2in" fill="black" />
@ -21,18 +30,19 @@
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
</defs> </defs>
<line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" /> <line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" /> <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" /> <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
<image href="map1.png" height="6.428in" width="9.971in" />
</svg> </svg>
<script> <script>
var svgns = "http://www.w3.org/2000/svg", var svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg'); svg = document.querySelector('svg');
var columnCount = 34, var columnCount = 33,
rowCount = 25, rowCount = 25,
pointDistanceInInches = 1.015; pointDistanceInInches = 1.05;
var isOdd = n => n % 2 === 1; var isOdd = n => n % 2 === 1;
@ -46,7 +56,7 @@
pointCoords.forEach((row, index) => row.forEach(([x, y]) => { pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'), var circle = document.createElementNS(svgns, 'circle'),
calcY = Math.sqrt(3) * pointDistanceInInches / 2; calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.93;
if (isOdd(index)) { if (isOdd(index)) {
var alternatingOffset = pointDistanceInInches / 2; var alternatingOffset = pointDistanceInInches / 2;

BIN
map1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB