[css-color-4] Update UCS diagrams

svgeesus · svgeesus · commit d5e5571baa88 · 2022-02-14T15:57:41.000-05:00
diff --git a/css-color-4/images/UCS-display-p3.svg b/css-color-4/images/UCS-display-p3.svg
@@ -101,6 +101,14 @@ with the gamuts of sRGB and display-p3.
 
   <!-- 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"/>
+  <!-- blank out underlying dashed lines -->
+    <circle r="0.0075" cx="0.45070" cy="-0.522887" fill="white" />
+    <circle r="0.0075" cx="0.12500" cy="-0.56250" fill="white"  />
+    <circle r="0.0075" cx="0.17544" cy="-0.15789" fill="white"  />
+    <circle r="0.0075" cx="0.20394" cy="-0.552899" fill="white" />
+    <circle r="0.0075" cx="0.13834" cy="-0.45550" fill="white"  />
+    <circle r="0.0075" cx="0.30504" cy="-0.32975" fill="white"  />
+
   <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"/>
@@ -110,12 +118,23 @@ with the gamuts of sRGB and display-p3.
   <circle r="0.006" cx="0.19783" cy="-0.46832" fill="white" stroke="#777" stroke-width="0.002"/>
 
 <!-- display-p3 -->
-  <polygon fill="none" stroke="#555" stroke-dasharray="0.006 0.003" stroke-width="0.004" points="0.49635, -0.52554 0.09860, -0.57767 0.17544, -0.15789"/>
-  <circle r="0.006" cx="0.49892" cy="-0.52562" fill="red" />
-  <circle r="0.006" cx="0.10811" cy="-0.57767" fill="green" />
-  <circle r="0.006" cx="0.17914" cy="-0.17076" fill="blue" />
-  <circle r="0.006" cx="0.21620" cy="-0.56265" fill="yellow" />
-  <circle r="0.006" cx="0.12554" cy="-0.47722" fill="cyan" />
-  <circle r="0.006" cx="0.35200" cy="-0.36259" fill="magenta" />
+ <polygon fill="none" stroke="#999" stroke-dasharray="0.005 0.003 0.003 0.003" stroke-width="0.004" points="0.4963503649635036, -0.5255474452554744
+  0.0986046511627907, -0.5776744186046512
+  0.17543859649122806, -0.15789473684210525"/>
+
+  <g stroke="white" stroke-width="0.0015">
+    <!-- 0.4963503649635036,0.5255474452554744 -->
+    <circle r="0.007" cx="0.4963503649635036" cy="-0.5255474452554744" fill="red" />
+    <!-- 0.0986046511627907,0.5776744186046512 -->
+    <circle r="0.007" cx="0.0986046511627907" cy="-0.5776744186046512" fill="green" />
+    <!-- 0.17543859649122806,0.15789473684210525 -->
+    <circle r="0.007" cx="0.17543859649122806" cy="-0.15789473684210525" fill="blue" />
+    <!-- 0.2047148084869415,0.5637680428701176 -->
+    <circle r="0.007" cx="0.2047148084869415" cy="-0.5637680428701176" fill="yellow" />
+    <!-- 0.12130534565938887,0.45364993605547993 -->
+    <circle r="0.007" cx="0.12130534565938887" cy="-0.45364993605547993" fill="cyan" />
+    <!-- 0.3245232882573508,0.3286936794041716 -->
+    <circle r="0.007" cx="0.3245232882573508" cy="-0.3286936794041716" fill="magenta" />
+  </g>
 
   </svg>
diff --git a/css-color-4/images/UCS-rec2020.svg b/css-color-4/images/UCS-rec2020.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.1 -0.7 0.8 0.8" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.05 -0.65 0.7 0.65" overflow="visible">
 <desc>Show u*,v* UCS diagram
 with the gamuts of sRGB and ITU Rec BT.2020.
 </desc>
@@ -101,6 +101,14 @@ with the gamuts of sRGB and ITU Rec BT.2020.
 
   <!-- 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"/>
+  <!-- blank out underlying dashed lines -->
+    <circle r="0.0075" cx="0.45070" cy="-0.522887" fill="white" />
+    <circle r="0.0075" cx="0.12500" cy="-0.56250" fill="white"  />
+    <circle r="0.0075" cx="0.17544" cy="-0.15789" fill="white"  />
+    <circle r="0.0075" cx="0.20394" cy="-0.552899" fill="white" />
+    <circle r="0.0075" cx="0.13834" cy="-0.45550" fill="white"  />
+    <circle r="0.0075" cx="0.30504" cy="-0.32975" fill="white"  />
+
   <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"/>
@@ -110,12 +118,23 @@ with the gamuts of sRGB and ITU Rec BT.2020.
   <circle r="0.006" cx="0.19783" cy="-0.46832" fill="white" stroke="#777" stroke-width="0.002"/>
 
 <!-- rec2020 -->
-  <polygon fill="none" stroke="#555" stroke-dasharray="0.006 0.003" stroke-width="0.004" points="0.55660, -0.51651 0.05563, -0.58680 0.15927, -0.12584"/>
-  <circle r="0.006" cx="0.55660" cy="-0.51651" fill="red" />
-  <circle r="0.006" cx="0.05563" cy="-0.58680" fill="green" />
-  <circle r="0.006" cx="0.15927" cy="-0.12584" fill="blue" />
-  <circle r="0.006" cx="0.20875" cy="-0.56531" fill="yellow" />
-  <circle r="0.006" cx="0.08565" cy="-0.45325" fill="cyan" />
-  <circle r="0.006" cx="0.36551" cy="-0.32862" fill="magenta" />
+  <polygon fill="none" stroke="#555" stroke-dasharray="0.006 0.003" stroke-width="0.004" points="0.5566037735849056, -0.5165094339622641
+   0.0556282722513089, -0.5867964659685865
+   0.15927051671732523, -0.12583586626139814"/>
+
+  <g stroke="white" stroke-width="0.002">
+    <!-- 0.5566037735849056,0.5165094339622641 -->
+    <circle r="0.007" cx="0.5566037735849056" cy="-0.5165094339622641" fill="red" />
+    <!-- 0.0556282722513089,0.5867964659685865 -->
+    <circle r="0.007" cx="0.0556282722513089" cy="-0.5867964659685865" fill="green" />
+    <!-- 0.15927051671732523,0.12583586626139814 -->
+    <circle r="0.007" cx="0.15927051671732523" cy="-0.12583586626139814" fill="blue" />
+    <!-- 0.2087502678917031,0.5653133982740614 -->
+    <circle r="0.007" cx="0.2087502678917031" cy="-0.5653133982740614" fill="yellow" />
+    <!-- 0.08565417549924849,0.45325286664544995 -->
+    <circle r="0.007" cx="0.08565417549924849" cy="-0.45325286664544995" fill="cyan" />
+    <!-- 0.3655086453834581,0.3286172446870168 -->
+    <circle r="0.007" cx="0.3655086453834581" cy="-0.3286172446870168" fill="magenta" />
+  </g>
 
   </svg>
