[css-color-4] finish 2020 Jzazbz diagram

svgeesus · svgeesus · commit 36627b932e42 · 2020-06-25T13:31:27.000-04:00
diff --git a/css-color-4/images/2020-prim-sec-JzCzHz.svg b/css-color-4/images/2020-prim-sec-JzCzHz.svg
@@ -0,0 +1,129 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -170 330 380" overflow="visible">
+<desc>Show a top-down view of the Jzazbz colorspace.
+      The rec2020 primaries and secondaries are shown,
+      with an annotation indicating the J value.
+      For comparison, the sRGB primaries and secondaries are also shown.
+</desc>
+<!--
+
+scale az,bz by 1000, -1000 for display
+
+    2020
+red 0.13559536198153432, 0.19715632581928358, 39.098134257508036
+0.13234427268006568, 0.15184497005325165, 0.12232607398792755
+
+yellow 0.18410437943313937, 0.1563897298742546, 97.80162895380568
+0.18147036546373763, -0.031376833759384354, 0.1540002624110578
+
+green 0.1386865014855021, 0.22275889875962163, 143.3324932624388
+0.13760792984847717, -0.18987044066657704, 0.13354456349129157
+
+cyan 0.14966993433954348, 0.1370869095927534, 188.08071078897495
+0.15212805431517357, -0.13916204562267176, -0.0444981545613824
+
+blue 0.06773621567804564, 0.18610489832229596, 249.65519807518643
+0.07751369823899373, -0.06799173341305007, -0.18764138649677187
+
+magenta 0.1481283747259493, 0.16338183317203991, 343.49441224108807
+0.14912270655178464, 0.1467189532147816, -0.07525529864170083
+
+
+ srgb
+
+red 0.11719279198004545, 0.1532804774716909, 43.83639219051565
+0.11467806662523278, 0.10828622872815613, 0.10087238363999973
+
+yellow 0.1829166624994315, 0.1335621837086678, 97.76858873449794
+0.18062391065294162, -0.026227280452021523, 0.12452502616254157
+
+green 0.15323218236277583, 0.14843143788072238, 128.22751681507117
+0.15182762936466088, -0.10053984821617526, 0.1092816886001316
+
+cyan 0.16441338776648737, 0.05921633554416941, 182.51124840116483
+0.16572731810519978, -0.06520274006559196, -0.028684609393079374
+
+blue 0.07320458186941983, 0.1562190466214118, 260.7169637567248
+ 	0.08095650018363497, -0.035468181698209894, -0.17025693890930516
+
+magenta 0.13399613714757014, 0.1256103636375293, 333.7320106845702
+0.13566103026275556, 0.10180659706020775, -0.08284531102005471
+
+
+-->
+<g fill="none" stroke="black" stroke-width="0.7">
+
+<!-- axes -->
+​<polyline points="0 -160 0 190"/>
+<polyline points="-190 0 180 0"/>
+
+<!-- tic marks -->
+<g stroke="#888">
+<path d="M-3,-150 h6 M-3,-140 h6 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 M-3,140 h6 M-3,150 h6 M-3,160 h6 M-3,170 h6 M-3,180 h6"/>
+<path d="M170,-3 v6 M160,-3 v6 M150,-3 v6 M140,-3 v6 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 M-160,-3 v6 M-170,-3 v6 M-180,-3 v6"/>
+
+
+
+<g stroke-dasharray="1 2" stroke="#bbb">
+<!-- radial lines for sRGB  hue angle and chroma -->
+<polyline points="0,0 108.286, -100.872"/>
+<polyline points="0,0 -26.227, -124.525"/>
+<polyline points="0,0 -100.540, -109.282"/>
+<polyline points="0,0 -65.203, 28.685"/>
+<polyline points="0,0 -35.468, 170.257"/>
+<polyline points="0,0 101.807, 82.845"/>
+</g>
+<!-- radial lines for hue angle and chroma -->
+<polyline points="0,0 151.845, -122.326"/>
+<polyline points="0,0 -31.377, -154.000"/>
+<polyline points="0,0 -189.870, -133.545"/>
+
+<polyline points="0,0 -139.162, 44.498"/>
+<polyline points="0,0 -67.992, 187.641"/>
+<polyline points="0,0 146.719, 75.255"/>
+</g>
+</g>
+
+<!-- sRGB primaries and secondaries -->
+<g stroke-dasharray="1 2" stroke="#bbb" stroke-width="0.7" fill="white">
+  <circle r="4" cx="108.286" cy="-100.872" fill="#FF000040"/>
+  <circle r="4" cx="-100.540" cy="-109.282" fill="#00FF0040"/>
+  <circle r="4" cx="-35.468" cy="170.257" fill="#0000FF40"/>
+  <circle r="4" cx="-65.203" cy="28.685" fill="#00FFFF40"/>
+  <circle r="4" cx="101.807" cy="82.845" fill="#FF00FF40"/>
+  <circle r="4" cx="-26.227" cy="-124.525" fill="#FFFF0040"/>
+</g>
+
+<!-- 2020 primaries and secondaries -->
+<!-- the fill colors are sRGB, *not the 2020 colors* -->
+<g stroke="none" stroke-width="0.7">
+  <circle r="4" cx="151.845" cy="-122.326" fill="red"/>
+  <circle r="4" cx="-189.870" cy="-133.545" fill="green"/>
+  <circle r="4" cx="-67.992" cy="187.641" fill="blue"/>
+  <circle r="4" cx="-139.162" cy="44.498" fill="cyan"/>
+  <circle r="4" cx="146.719" cy="75.255" fill="magenta"/>
+  <circle r="4" cx="-31.377" cy="-154.000" fill="yellow"/>
+</g>
+
+<circle r="5.4"/>
+<circle r="4.2" fill="#777"/>
+<circle r="3" fill="#fff"/>
+<g font-family="sans-serif" font-size="6.5pt">
+<!-- haha not really 6pt but a unit is required per CSS -->
+  <text x="180" y="-3">+az</text>
+  <text x="-190.5" y="-3" text-anchor="end">-az</text>
+  <text x="4" y="192">-bz</text>
+  <text x="4" y="-158">+bz</text>
+</g>
+
+<g font-family="sans-serif" font-size="6pt">
+  <text x="128" y="-85">Jz: 0.135595<tspan x="128" dy="12">Cz: 0.197156<tspan x="128" dy="12">hz: 39.0981</tspan></tspan></text>
+  <text x="-196" y="-95">Jz: 0.138687<tspan x="-196" dy="12">Cz: 0.222759<tspan x="-196" dy="12">hz: 143.3325</tspan></tspan></text>
+  <text x="-115" y="140">Jz: 0.067736<tspan x="-115" dy="12">Cz: 0.186105<tspan x="-115" dy="12">hz: 249.6552</tspan></tspan></text>
+  <text x="-165" y="62">Jz: 0.149670<tspan x="-165" dy="12">Cz: 0.137087<tspan x="-165" dy="12">hz: 188.0807</tspan></tspan></text>
+  <text x="125" y="35">Jz: 0.148128<tspan x="125" dy="12">Cz: 0.163382<tspan x="125" dy="12">hz: 343.4944</tspan></tspan></text>
+  <text x="-95" y="-148">Jz: 0.184104<tspan x="-95" dy="12">Cz: 0.156390<tspan x="-95" dy="12">hz: 97.8016</tspan></tspan></text>
+
+</g>
+</svg>
