color wheel page

und3f · Oct 4, 2017 · 24e7572 · 24e7572
1 parent 1143a4d
commit 24e7572
Showing 1 changed file with 112 additions and 0 deletions.
diff --git a/color-wheel.html b/color-wheel.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Color wheel</title>
+    <meta name="author" content="Sergii Zasenko">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <style>
+      body {
+        margin: 4px;
+        font-family: 'Roboto', sans-serif;
+        color: #414140;
+        background-color: #EFEFEE;
+      }
+
+      a {
+        color: #414140;
+      }
+
+      #color-wheel {
+        margin: auto;
+          width: 100%;
+      }
+
+      #credits {
+        position: fixed;
+        bottom: 4px;
+        left: 4px;
+        z-index: -100;
+      }
+
+      #credits-author {
+        margin-top: 1em;
+      }
+
+      #credits-license {
+        font-size: 0.6em;
+      }
+    </style>
+  </head>
+  <body>
+    <svg id="color-wheel" width="300" height="300">
+    </svg>
+
+    <script>
+      var colors = [
+        "cea50d", "cf920b", "d16e10",
+        "ce5c1e", "cf4721", "cb3a1f",
+        "c12e24", "b62826", "a52c35",
+        "952939", "782841", "592d5a",
+        "3c3271", "29418a", "12419c",
+        "105395", "065988", "0e6785",
+        "127381", "077d75", "127f59",
+        "228741", "6c9f32", "a5a519"
+      ];
+      var wheelEl = document.getElementById("color-wheel");
+      var width = wheelEl.width.baseVal.value;
+      var height = wheelEl.height.baseVal.value;
+
+      var radius = Math.min(width, height)/2;
+      var labelSize = radius * 0.25;
+      var labelPadding = 0.05;
+
+      function calcSegmentStartPosition(radius, segment, segments, endSegment, roffset) {
+        if (roffset === undefined) 
+          roffset = 0;
+
+        var padding = labelPadding;
+        if (endSegment)
+          padding = -padding;
+
+        var angle = (segment - 1/2 + padding) / segments * 2 * Math.PI  - Math.PI / 2;
+
+        var x = Math.cos(angle) * radius + radius + roffset;
+        var y = Math.sin(angle) * radius + radius + roffset;
+        return [x, y];
+      }
+
+      var innerRadius = radius - labelSize;
+      var segments = colors.length
+      for (var is in colors) {
+        var i = parseInt(is);
+        var icoffset = radius-innerRadius;
+        var outerCircleStart = calcSegmentStartPosition(radius, i, segments);
+        var outerCircleEnd = calcSegmentStartPosition(radius, i+1, segments, true);
+        var innerCircleEnd  = calcSegmentStartPosition(innerRadius, i+1, segments, true, icoffset);
+        var innerCircleStart  = calcSegmentStartPosition(innerRadius, i, segments, false, icoffset);
+
+        var path = "";
+        path += "M " + outerCircleStart.join(" ");
+        path += "A " + [radius, radius, 0, 0, 1].join(" ") + " " + outerCircleEnd.join(" ");
+        path += "L " + innerCircleEnd.join(" ");
+        path += "A " + [innerRadius, innerRadius, 0, 0, 0].join(" ") + " " + innerCircleStart.join(" ");
+
+        var colorEl = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            'path');
+        colorEl.setAttribute("fill", "#" + colors[i]);
+        colorEl.setAttribute("d", path);
+        wheelEl.appendChild(colorEl);
+      }
+    </script>
+    <div id="credits">
+      <div id="credits-author">
+        Copyright © 2017 <a href="http://zasenko.name" rel="author">Sergii Zasenko</a>
+      </div>
+      <div id="credits-license">
+        This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
+      </div>
+    </div>
+  </body>
+</html>