[css-color-4] add 4-primary display example

svgeesus · svgeesus · commit 2768cd907b67 · 2020-05-23T10:03:46.000-04:00
diff --git a/css-color-4/images/UCS-RYGB.svg b/css-color-4/images/UCS-RYGB.svg
@@ -0,0 +1,126 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.1 -0.7 0.8 0.8" overflow="visible">
+<desc>Show u*,v* UCS diagram
+with the gamuts of sRGB and
+a four-primary RYGB system
+proposed by Matthew Brennesholtz
+https://www.displaydaily.com/article/display-daily/wcg-standards-needed-for-multi-primary-displays .
+The yellow is close to the yellow-green "green" sRGB primary
+while the green is an emerald cyan-green.
+</desc>
+
+<!-- tongue -->
+<path fill="none" stroke="black" stroke-width="0.003" d="M 0.256804  -0.016594
+  L 0.256637  -0.016593
+  L 0.256418  -0.016266
+  L 0.256085  -0.016263
+  L 0.255699  -0.015935
+  L 0.255200  -0.015932
+  L 0.254535  -0.015927
+  L 0.253704  -0.015921
+  L 0.252207  -0.016885
+  L 0.249615  -0.019128
+  L 0.246120  -0.022623
+  L 0.241063  -0.027948
+  L 0.234690  -0.035011
+  L 0.226630  -0.043680
+  L 0.216060  -0.054946
+  L 0.203340  -0.068779
+  L 0.187720  -0.087114
+  L 0.168963  -0.111946
+  L 0.144076  -0.150984
+  L 0.114692  -0.204374
+  L 0.082816  -0.270829
+  L 0.052134  -0.342686
+  L 0.028159  -0.411679
+  L 0.011891  -0.469843
+  L 0.003473  -0.513066
+  L 0.001438  -0.543162
+  L 0.004643  -0.563843
+  L 0.005859  -0.567036
+  L 0.007213  -0.569939
+  L 0.008771  -0.572575
+  L 0.010438  -0.574905
+  L 0.012285  -0.576969
+  L 0.014220  -0.578754
+  L 0.016315  -0.580309
+  L 0.018482  -0.581618
+  L 0.020756  -0.582743
+  L 0.023116  -0.583667
+  L 0.025566  -0.584422
+  L 0.028050  -0.585009
+  L 0.030633  -0.585478
+  L 0.033285  -0.585851
+  L 0.036008  -0.586142
+  L 0.050059  -0.586754
+  L 0.064335  -0.586523
+  L 0.079224  -0.585616
+  L 0.095269  -0.584113
+  L 0.112701  -0.582069
+  L 0.131858  -0.579553
+  L 0.153101  -0.576592
+  L 0.176586  -0.573182
+  L 0.202596  -0.569364
+  L 0.231170  -0.565107
+  L 0.262343  -0.560441
+  L 0.295958  -0.555411
+  L 0.331527  -0.550115
+  L 0.368060  -0.544626
+  L 0.403475  -0.539334
+  L 0.437943  -0.534187
+  L 0.469171  -0.529561
+  L 0.496768  -0.525419
+  L 0.520257  -0.521894
+  L 0.539920  -0.518977
+  L 0.556503  -0.516489
+  L 0.570880  -0.514332
+  L 0.583036  -0.512508
+  L 0.592866  -0.511070
+  L 0.600496  -0.509926
+  L 0.606437  -0.509035
+  L 0.610879  -0.508368
+  L 0.613777  -0.507933
+  L 0.616162  -0.507576
+  L 0.618025  -0.507296
+  L 0.619897  -0.507015
+  L 0.621507  -0.506774
+  L 0.622584  -0.506612
+  L 0.623123  -0.506531
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  L 0.623393  -0.506491
+  Z"/>
+
+  <!-- sRGB  -->
+  <polygon fill="none" stroke="#CCC" stroke-dasharray="0.004 0.003" stroke-width="0.004" points="0.45070, -0.522887 0.125, -0.5625 0.17544, -0.15789"/>
+  <circle r="0.006" cx="0.45070" cy="-0.522887" fill="red" fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.12500" cy="-0.56250" fill="green"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.17544" cy="-0.15789" fill="blue"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.20394" cy="-0.552899" fill="yellow" fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.13834" cy="-0.45550" fill="cyan"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.30504" cy="-0.32975" fill="magenta"  fill-opacity="0.4"/>
+  <circle r="0.006" cx="0.19783" cy="-0.46832" fill="white" stroke="#777" stroke-width="0.002"/>
+
+<!-- RYGB -->
+  <polygon fill="none" stroke="#555" stroke-dasharray="0.006 0.003" stroke-width="0.004" points="0.5126676602086437, -0.5230998509687034 0.12307692307692306, -0.5798076923076922
+  0.02626641651031895, -0.5487804878048781 0.18535320803629293, -0.0904082955281918"/>
+  <circle r="0.006" cx="0.5126676602086437" cy="-0.5230998509687034" fill="red" />
+  <circle r="0.006" cx="0.12307692307692306" cy="-0.5798076923076922" fill="lime" />
+  <circle r="0.006" cx="0.02626641651031895" cy="-0.5487804878048781" fill="#0F9" />
+  <circle r="0.006" cx="0.18535320803629293" cy="-0.09040829552819185" fill="blue" />
+
+
+  </svg>
