better layout

svgeesus · svgeesus · commit d5c592fdb610 · 2026-07-28T17:37:22.000+03:00
diff --git a/css-color-4/images/2020-prim-sec-JzCzHz.svg b/css-color-4/images/2020-prim-sec-JzCzHz.svg
@@ -1,129 +1,110 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -170 330 380" overflow="visible">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-227.52 -189 417 458" overflow="visible" width="700" height="769">
 <desc>Show a top-down view of the Jzazbz color space.
       The rec2020 primaries and secondaries are shown,
-      with an annotation indicating the J value.
-      For comparison, the sRGB primaries and secondaries are also shown.
+      with a legend giving the Jz, Cz and hz values.
+      For comparison, the sRGB primaries and secondaries are also shown (dashed lines).
 </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
-
-
--->
+<!-- az,bz values multiplied by 1000 for convenient plotting,
+     and bz negated for a y-down coordinate system -->
+<rect x="-227.52" y="-189" width="100%" height="100%" fill="white" />
 <g fill="none" stroke="black" stroke-width="0.7">
 
 <!-- axes -->
-​<polyline points="0 -160 0 190"/>
-<polyline points="-190 0 180 0"/>
+<polyline points="0 -169 0 202.64"/>
+<polyline points="-204.87 0 166.85 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"/>
+<path d="M-3,-160 h6 M-3,-140 h6 M-3,-120 h6 M-3,-100 h6 M-3,-80 h6 M-3,-60 h6 M-3,-40 h6 M-3,-20 h6 M-3,20 h6 M-3,40 h6 M-3,60 h6 M-3,80 h6 M-3,100 h6 M-3,120 h6 M-3,140 h6 M-3,160 h6 M-3,180 h6 M-3,200 h6"/>
+<path d="M-200,-3 v6 M-180,-3 v6 M-160,-3 v6 M-140,-3 v6 M-120,-3 v6 M-100,-3 v6 M-80,-3 v6 M-60,-3 v6 M-40,-3 v6 M-20,-3 v6 M20,-3 v6 M40,-3 v6 M60,-3 v6 M80,-3 v6 M100,-3 v6 M120,-3 v6 M140,-3 v6 M160,-3 v6"/>
 </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 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 -100.540,-109.282"/>
+<polyline points="0,0 -35.468,170.257"/>
+<polyline points="0,0 -65.203,28.685"/>
+<polyline points="0,0 101.807,82.845"/>
+<polyline points="0,0 -26.227,-124.525"/>
 </g>
+<!-- radial lines for rec2020 hue angle and chroma -->
+<polyline points="0,0 151.845,-122.326"/>
+<polyline points="0,0 -189.870,-133.545"/>
+<polyline points="0,0 -67.992,187.641"/>
+<polyline points="0,0 -139.162,44.498"/>
+<polyline points="0,0 146.719,75.255"/>
+<polyline points="0,0 -31.377,-154.000"/>
 </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"/>
+  <circle r="3.9" cx="108.286" cy="-100.872" fill="#FF000040"/>
+  <circle r="3.9" cx="-100.540" cy="-109.282" fill="#00FF0040"/>
+  <circle r="3.9" cx="-35.468" cy="170.257" fill="#0000FF40"/>
+  <circle r="3.9" cx="-65.203" cy="28.685" fill="#00FFFF40"/>
+  <circle r="3.9" cx="101.807" cy="82.845" fill="#FF00FF40"/>
+  <circle r="3.9" 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"/>
+<!-- rec2020 primaries and secondaries -->
+<!-- the fill colors are sRGB, *not the rec2020 colors* -->
+<g stroke="none">
+  <circle r="3.9" cx="151.845" cy="-122.326" fill="red"/>
+  <circle r="3.9" cx="-189.870" cy="-133.545" fill="green"/>
+  <circle r="3.9" cx="-67.992" cy="187.641" fill="blue"/>
+  <circle r="3.9" cx="-139.162" cy="44.498" fill="cyan"/>
+  <circle r="3.9" cx="146.719" cy="75.255" fill="magenta"/>
+  <circle r="3.9" 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>
+<circle r="3.9" fill="#777"/>
+<circle r="2.4" fill="#fff"/>
+<g font-family="sans-serif" font-size="6.8pt">
+<!-- haha not really 6.8pt but a unit is required per CSS -->
+  <text x="170.85" y="2">+az</text>
+  <text x="-208.87" y="2" text-anchor="end">-az</text>
+  <text x="4" y="212.64">-bz</text>
+  <text x="4" y="-175">+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 font-family="sans-serif" font-size="4.8pt">
+  <text x="-97.43" y="222.64" font-weight="bold">Jz</text>
+  <text x="-67.62" y="222.64" font-weight="bold">Cz</text>
+  <text x="-37.81" y="222.64" font-weight="bold">hz</text>
+  <text x="47.31" y="222.64" font-weight="bold">Jz</text>
+  <text x="77.12" y="222.64" font-weight="bold">Cz</text>
+  <text x="106.93" y="222.64" font-weight="bold">hz</text>
+  <circle r="3.24" cx="-133.5" cy="230.56" fill="red"/>
+  <text x="-124.26" y="232.24">red</text>
+  <text x="-97.43" y="232.24">0.135595</text>
+  <text x="-67.62" y="232.24">0.197156</text>
+  <text x="-37.81" y="232.24">39.0981</text>
+  <circle r="3.24" cx="11.24" cy="230.56" fill="cyan"/>
+  <text x="20.48" y="232.24">cyan</text>
+  <text x="47.31" y="232.24">0.149670</text>
+  <text x="77.12" y="232.24">0.137087</text>
+  <text x="106.93" y="232.24">188.0807</text>
+  <circle r="3.24" cx="-133.5" cy="240.16" fill="green"/>
+  <text x="-124.26" y="241.84">green</text>
+  <text x="-97.43" y="241.84">0.138687</text>
+  <text x="-67.62" y="241.84">0.222759</text>
+  <text x="-37.81" y="241.84">143.3325</text>
+  <circle r="3.24" cx="11.24" cy="240.16" fill="magenta"/>
+  <text x="20.48" y="241.84">magenta</text>
+  <text x="47.31" y="241.84">0.148128</text>
+  <text x="77.12" y="241.84">0.163382</text>
+  <text x="106.93" y="241.84">343.4944</text>
+  <circle r="3.24" cx="-133.5" cy="249.76" fill="blue"/>
+  <text x="-124.26" y="251.44">blue</text>
+  <text x="-97.43" y="251.44">0.067736</text>
+  <text x="-67.62" y="251.44">0.186105</text>
+  <text x="-37.81" y="251.44">249.6552</text>
+  <circle r="3.24" cx="11.24" cy="249.76" fill="yellow"/>
+  <text x="20.48" y="251.44">yellow</text>
+  <text x="47.31" y="251.44">0.184104</text>
+  <text x="77.12" y="251.44">0.156390</text>
+  <text x="106.93" y="251.44">97.8016</text>
 </g>
-</svg>
+</svg>
