Render different elevation level hex grids

2024-06-17 16:09:23 -07:00
parent 2979c6c3fd
commit 5e05d00197
2 changed files with 82 additions and 7 deletions
--- a/public/radial.html
+++ b/public/radial.html
@@ -3,13 +3,14 @@
  <head>
    <style>
      polygon {
-        fill: none;
+        fill: inherit;
        stroke: black;
        stroke-width: 0.5px;
      }

      svg {
        border: 1px solid slategray;
+        fill: none;
      }

      text {
@@ -17,11 +18,31 @@
        text-anchor: middle;
        user-select: none;
        font-family: sans-serif;
+        fill: black;
+      }
+
+      .buildings .elevation-basement {
+        fill: lightgray;
+        /* display: none; */
+      }
+
+      .elevation-1 {
+        /* display: none; */
+      }
+
+      .buildings .elevation-1 {
+        fill: lightgreen;
+        /* display: none; */
+      }
+
+      .buildings .elevation-2 {
+        fill: lightpink;
+        display: none;
      }
    </style>
  </head>
  <body>
-    <svg viewBox="-150 -100 300 200" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="-300 -200 600 400" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
      </defs>