[css-color-4] start on 2020 diagram

svgeesus · svgeesus · commit e6f9940e7f84 · 2020-03-04T21:41:27.000-05:00
diff --git a/css-color-4/images/2020-prim-sec.svg b/css-color-4/images/2020-prim-sec.svg
@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-180 -140 335 280" overflow="visible">
+<desc>Show a top-down view of the CIE Lab colorspace.
+      The rec2020 primaries and secondaries are shown,
+      with an annotation indicating the L value.
+      For comparison, the sRGB primaries and secondaries are also shown.
+</desc>
+<g fill="none" stroke="black" stroke-width="0.5">
+
+<!-- axes -->
+​<polyline points="0 -140 0 140"/>
+<polyline points="-160 0 140 0"/>
+
+<!-- tic marks -->
+<g stroke="#888">
+<path d="M-3,-130 h6 M-3,-120 h6 M-3,-110 h6 M-3,-100 h6 M-3,-90 h6 M-3,-80 h6 M-3,-70 h6 M-3,-60 h6 M-3,-50 h6 M-3,-40 h6 M-3,-30 h6 M-3,-20 h6 M-3,-10 h6 M-3,10 h6 M-3,20 h6 M-3,30 h6 M-3,40 h6 M-3,50 h6 M-3,60 h6 M-3,70 h6 M-3,80 h6 M-3,90 h6 M-3,100 h6 M-3,110 h6 M-3,120 h6 M-3,130 h6"/>
+<path d="M130,-3 v6 M120,-3 v6
+M110,-3 v6 M100,-3 v6 M90,-3 v6 M80,-3 v6 M70,-3 v6 M60,-3 v6 M50,-3 v6 M40,-3 v6 M30,-3 v6 M20,-3 v6 M10,-3 v6 M-10,-3 v6 M-20,-3 v6 M-30,-3 v6 M-40,-3 v6 M-50,-3 v6 M-60,-3 v6 M-70,-3 v6 M-80,-3 v6 M-90,-3 v6 M-100,-3 v6 M-110,-3 v6
+M-120,-3 v6 M-130,-3 v6 M-140,-3 v6 M-150,-3 v6"/>
+
+
+
+<g stroke-dasharray="1 2" stroke="#bbb">
+<!-- radial lines for sRGB  hue angle and chroma -->
+<polyline points="0,0 80.81,-69.88"/>
+<polyline points="0,0 -79.28,-80.99"/>
+<polyline points="0,0 68.29,112.02"/>
+<polyline points="0,0 -50.66,14.96"/>
+<polyline points="0,0 93.54,60.49"/>
+<polyline points="0,0 -15.75,-93.38"/>
+</g>
+<!-- radial lines for hue angle and chroma -->
+<polyline points="0,0 116.89, -106.74"/>
+<polyline points="0,0 -160.72, -109.23"/>
+<polyline points="0,0 74.46,126.25"/>
+
+<polyline points="0,0 -113.05, 20.83"/>
+<polyline points="0,0 125.90, 60.10"/>
+<polyline points="0,0 -14.92, -132.12"/>
+</g>
+</g>
+
+<!-- sRGB primaries and secondaries -->
+<g stroke-dasharray="1 2" stroke="#bbb" stroke-width="0.5" fill="white">
+  <circle r="3" cx="80.81247134537588" cy="-69.88502268764606" fill="#FF000040"/>
+  <circle r="3" cx="-79.2872863932051" cy="-80.99026038511582" fill="#00FF0040"/>
+  <circle r="3" cx="68.29859917400466" cy="112.02941005918544" fill="#0000FF40"/>
+  <circle r="3" cx="-50.665438698900886" cy="14.962023848069572" fill="#00FFFF40"/>
+  <circle r="3" cx="93.54998546820059" cy="60.49854210467602" fill="#FF00FF40"/>
+  <circle r="3" cx="-15.75288562782686" cy="-93.38840952541491" fill="#FFFF0040"/>
+</g>
+
+<!-- 2020 primaries and secondaries -->
+<!-- the fill colors are sRGB, *not the 2020 colors* -->
+<g stroke="none" stroke-width="0.5">
+  <circle r="3" cx="116.89263893881396" cy="-106.74578612745107" fill="red"/>
+  <circle r="3" cx="-160.725934330119" cy="-109.23188997112831" fill="green"/>
+  <circle r="3" cx="74.46071884508126" cy="126.2496937036462" fill="blue"/>
+  <circle r="3" cx="-113.04783074477415" cy="20.832309301794204" fill="cyan"/>
+  <circle r="3" cx="125.90138993786742" cy="60.10409305948663" fill="magenta"/>
+  <circle r="3" cx="-14.917348118930473" cy="-132.12419011331428" fill="yellow"/>
+</g>
+
+<circle r="4"/>
+<circle r="3" fill="#777"/>
+<circle r="2" fill="#fff"/>
+<g font-family="sans-serif" font-size="6pt">
+<!-- haha not really 6pt but a unit is required per CSS -->
+  <text x="140" y="-3">+a</text>
+  <text x="-160.5" y="-3" text-anchor="end">-a</text>
+  <text x="4" y="142">-b</text>
+  <text x="4" y="-138">+b</text>
+</g>
+
+<g font-family="sans-serif" font-size="5pt">
+  <text x="108" y="-90">L: 56.2047%<tspan x="108" dy="10">C: 136.75689<tspan x="108" dy="10">H: 46.3080</tspan></tspan></text>
+  <text x="-140" y="-125">L: 86.6146%<tspan x="-140" dy="10">C: 148.1135<tspan x="-140" dy="10">H: 136.0089</tspan></tspan></text>
+  <text x="75" y="97">L: 29.5676%<tspan x="75" dy="10">C: 131.2070<tspan x="75" dy="10">H: 301.3685</tspan></tspan></text>
+  <text x="-116" y="33">L: 89.8048%<tspan x="-116" dy="10">C: 70.7166<tspan x="-116" dy="10">H: 194.4753</tspan></tspan></text>
+  <text x="105" y="35">L: 62.3180%<tspan x="105" dy="10">C: 122.38016<tspan x="105" dy="10">H: 61.4314</tspan></tspan></text>
+  <text x="-63" y="-130">L: 97.3656%<tspan x="-63" dy="10">C: 23.2719<tspan x="-63" dy="10">H: 98.1357</tspan></tspan></text>
+
+</g>
+</svg>
diff --git a/css-color-4/images/P3-prim-sec.svg b/css-color-4/images/P3-prim-sec.svg
@@ -39,12 +39,12 @@
 
 <!-- sRGB primaries and secondaries -->
 <g stroke-dasharray="1 2" stroke="#bbb" stroke-width="0.5" fill="white">
-  <circle r="3" cx="80.81247134537588" cy="-69.88502268764606"/>
-  <circle r="3" cx="-79.2872863932051" cy="-80.99026038511582"/>
-  <circle r="3" cx="68.29859917400466" cy="112.02941005918544"/>
-  <circle r="3" cx="-50.665438698900886" cy="14.962023848069572"/>
-  <circle r="3" cx="93.54998546820059" cy="60.49854210467602"/>
-  <circle r="3" cx="-15.75288562782686" cy="-93.38840952541491"/>
+  <circle r="3" cx="80.81247134537588" cy="-69.88502268764606" fill="#FF000040"/>
+  <circle r="3" cx="-79.2872863932051" cy="-80.99026038511582" fill="#00FF0040"/>
+  <circle r="3" cx="68.29859917400466" cy="112.02941005918544" fill="#0000FF40"/>
+  <circle r="3" cx="-50.665438698900886" cy="14.962023848069572" fill="#00FFFF40"/>
+  <circle r="3" cx="93.54998546820059" cy="60.49854210467602" fill="#FF00FF40"/>
+  <circle r="3" cx="-15.75288562782686" cy="-93.38840952541491" fill="#FFFF0040"/>
 </g>
 
 <!-- P3 primaries and secondaries -->
