[css-color-4] attempt to demonstrate blue to purple curvature in Lab, but SVG implementations suck in terms of sub-pixel precision

svgeesus · svgeesus · commit ba8913b5b89f · 2020-05-28T13:37:36.000-04:00
diff --git a/css-color-4/images/lab-blue-bend.svg b/css-color-4/images/lab-blue-bend.svg
@@ -0,0 +1,146 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 140 18" width="700px">
+<desc>Show a gradient from sRGB blue,
+in LCH,
+as Chroma is reduced from the max value (131) to near-zero
+demonstrating a purpling mid-way.
+</desc>
+<!-- for (var i = 131.2; i >=0; i- -) {
+  console.log({i});
+    console.log(LCH_to_sRGB([lch_blue[0]% i% lch_blue[2]]));
+}
+-->
+<g stroke="none">
+<rect y="0" width="1" height="10" x="131" fill="rgb(0.0018581884325857611% 0.0004717193895926536% 99.9958051153926%)"/>
+<rect y="0" width="1" height="10" x="130" fill="rgb(02.6642112931886237% 00.6570115611086236% 99.400546486435%)"/>
+<rect y="0" width="1" height="10" x="129" fill="rgb(05.1564563076438204% 01.3088165283796133% 98.80590503240018%)"/>
+<rect y="0" width="1" height="10" x="128" fill="rgb(07.070896448876615% 01.960123699004135% 98.2118821617837%)"/>
+<rect y="0" width="1" height="10" x="127" fill="rgb(08.622281762314049% 02.610924676277526% 97.6184792820631%)"/>
+<rect y="0" width="1" height="10" x="126" fill="rgb(09.945457074018146% 03.261211063494765% 97.02569779940563%)"/>
+<rect y="0" width="1" height="10" x="125" fill="rgb(11.10827668613032% 03.910974463951344% 96.4335391183638%)"/>
+<rect y="0" width="1" height="10" x="124" fill="rgb(12.150481119850173% 04.533904357692233% 95.84200464155704%)"/>
+<rect y="0" width="1" height="10" x="123" fill="rgb(13.097674818033492% 05.1056480130893846% 95.25109576933967%)"/>
+<rect y="0" width="1" height="10" x="122" fill="rgb(13.967480405770516% 05.6367655558111955% 94.66081389945401%)"/>
+<rect y="0" width="1" height="10" x="121" fill="rgb(14.77263077804649% 06.1341815165613635% 94.0711604266688%)"/>
+<rect y="0" width="1" height="10" x="120" fill="rgb(15.522675720606705% 06.603075830058314% 93.48213674240113%)"/>
+<rect y="0" width="1" height="10" x="119" fill="rgb(16.224992863632864% 07.047439888325388% 92.89374423432245%)"/>
+<rect y="0" width="1" height="10" x="118" fill="rgb(16.885420603644413% 07.470424248420848% 92.3059842859469%)"/>
+<rect y="0" width="1" height="10" x="117" fill="rgb(17.508672404923498% 07.874565964915495% 91.71885827620181%)"/>
+<rect y="0" width="1" height="10" x="116" fill="rgb(18.098618131009728% 08.261942776202053% 91.13236757897959%)"/>
+<rect y="0" width="1" height="10" x="115" fill="rgb(18.658481053312398% 08.634280948621884% 90.54651356266983%)"/>
+<rect y="0" width="1" height="10" x="114" fill="rgb(19.19097947252926% 08.99303270934372% 89.9612975896709%)"/>
+<rect y="0" width="1" height="10" x="113" fill="rgb(19.698430849336496% 09.339433113542991% 89.37672101588043%)"/>
+<rect y="0" width="1" height="10" x="112" fill="rgb(20.182829889991222% 09.674542637738004% 88.79278519016337%)"/>
+<rect y="0" width="1" height="10" x="111" fill="rgb(20.645908122596818% 09.999279638629821% 88.20949145379678%)"/>
+<rect y="0" width="1" height="10" x="110" fill="rgb(21.089180053412404% 10.314445470875058% 87.62684113989038%)"/>
+<rect y="0" width="1" height="10" x="109" fill="rgb(21.513979418579354% 10.620744191811132% 87.04483557278145%)"/>
+<rect y="0" width="1" height="10" x="108" fill="rgb(21.921488008539292% 10.918798210769962% 86.4634760674036%)"/>
+<rect y="0" width="1" height="10" x="107" fill="rgb(22.312758842497532% 11.209160856288841% 85.88276392862751%)"/>
+<rect y="0" width="1" height="10" x="106" fill="rgb(22.688734988917886% 11.492326570385014% 85.30270045057271%)"/>
+<rect y="0" width="1" height="10" x="105" fill="rgb(23.05026499100744% 11.768739254234903% 84.72328691588918%)"/>
+<rect y="0" width="1" height="10" x="104" fill="rgb(23.398115616303522% 12.038799158163027% 84.14452459500716%)"/>
+<rect y="0" width="1" height="10" x="103" fill="rgb(23.732982476253123% 12.302868613968607% 83.56641474535377%)"/>
+<rect y="0" width="1" height="10" x="102" fill="rgb(24.055498934846847% 12.561276838209087% 82.9889586105352%)"/>
+<rect y="0" width="1" height="10" x="101" fill="rgb(24.366243631356727% 12.814323983631598% 82.41215741948226%)"/>
+<rect y="0" width="1" height="10" x="100" fill="rgb(24.665746871718752% 13.062284577408625% 81.83601238555834%)"/>
+<rect y="0" width="1" height="10" x="99" fill="rgb(24.954496089670003% 13.305410455639907% 81.26052470562736%)"/>
+<rect y="0" width="1" height="10" x="98" fill="rgb(25.232940537840026% 13.543933281256013% 80.68569555908027%)"/>
+<rect y="0" width="1" height="10" x="97" fill="rgb(25.501495337400093% 13.778066715215898% 80.11152610681802%)"/>
+<rect y="0" width="1" height="10" x="96" fill="rgb(25.760544990247836% 14.008008297468025% 79.53801749018872%)"/>
+<rect y="0" width="1" height="10" x="95" fill="rgb(26.010446438364937% 14.233941083604726% 78.96517082987723%)"/>
+<rect y="0" width="1" height="10" x="94" fill="rgb(26.251531739676287% 14.45603507480514% 78.39298722474455%)"/>
+<rect y="0" width="1" height="10" x="93" fill="rgb(26.4841104175391% 14.674448472022314% 77.82146775061473%)"/>
+<rect y="0" width="1" height="10" x="92" fill="rgb(26.708471531200495% 14.889328780045988% 77.2506134590068%)"/>
+<rect y="0" width="1" height="10" x="91" fill="rgb(26.92488550665676% 15.100813782777603% 76.68042537580886%)"/>
+<rect y="0" width="1" height="10" x="90" fill="rgb(27.133605760927887% 15.309032407565443% 76.11090449989187%)"/>
+<rect y="0" width="1" height="10" x="89" fill="rgb(27.33487014751628% 15.514105493603314% 75.54205180165976%)"/>
+<rect y="0" width="1" height="10" x="88" fill="rgb(27.528902246512094% 15.716146477058598% 74.97386822153298%)"/>
+<rect y="0" width="1" height="10" x="87" fill="rgb(27.715912519254277% 15.915262003670141% 74.40635466836208%)"/>
+<rect y="0" width="1" height="10" x="86" fill="rgb(27.896099344508385% 16.11155247795907% 73.83951201776777%)"/>
+<rect y="0" width="1" height="10" x="85" fill="rgb(28.06964995066727% 16.305112556867074% 73.27334111040414%)"/>
+<rect y="0" width="1" height="10" x="84" fill="rgb(28.23674125642676% 16.496031594524482% 72.70784275014046%)"/>
+<rect y="0" width="1" height="10" x="83" fill="rgb(28.3975406306624% 16.684394043918185% 72.14301770215812%)"/>
+<rect y="0" width="1" height="10" x="82" fill="rgb(28.552206580776934% 16.870279820441922% 71.57886669095788%)"/>
+<rect y="0" width="1" height="10" x="81" fill="rgb(28.7008893775571% 17.053764631646823% 71.01539039827315%)"/>
+<rect y="0" width="1" height="10" x="80" fill="rgb(28.84373162352898% 17.23492027694399% 70.45258946088431%)"/>
+<rect y="0" width="1" height="10" x="79" fill="rgb(28.98086877091043% 17.413814920530135% 69.89046446832863%)"/>
+<rect y="0" width="1" height="10" x="78" fill="rgb(29.1124295944925% 17.5905133403948% 69.32901596050098%)"/>
+<rect y="0" width="1" height="10" x="77" fill="rgb(29.23853662412865% 17.765077155914907% 68.76824442513886%)"/>
+<rect y="0" width="1" height="10" x="76" fill="rgb(29.359306540943664% 17.937565036238662% 68.208150295186%)"/>
+<rect y="0" width="1" height="10" x="75" fill="rgb(29.47485054088827% 18.10803289139831% 67.64873394602823%)"/>
+<rect y="0" width="1" height="10" x="74" fill="rgb(29.58527466884344% 18.276534047864484% 67.08999569259397%)"/>
+<rect y="0" width="1" height="10" x="73" fill="rgb(29.690680126110613% 18.443119410058534% 66.53193578631311%)"/>
+<rect y="0" width="1" height="10" x="72" fill="rgb(29.791163553806876% 18.60783760916726% 65.97455441192539%)"/>
+<rect y="0" width="1" height="10" x="71" fill="rgb(29.88681729440429% 18.77073514045578% 65.4178516841312%)"/>
+<rect y="0" width="1" height="10" x="70" fill="rgb(29.97772963341006% 18.93185649014349% 64.86182764407503%)"/>
+<rect y="0" width="1" height="10" x="69" fill="rgb(30.063985022969925% 19.091244252793646% 64.30648225565291%)"/>
+<rect y="0" width="1" height="10" x="68" fill="rgb(30.145664288990054% 19.248939240066687% 63.75181540163382%)"/>
+<rect y="0" width="1" height="10" x="67" fill="rgb(30.22284482320704% 19.404980581599154% 63.19782687958444%)"/>
+<rect y="0" width="1" height="10" x="66" fill="rgb(30.29560076148962% 19.559405818691783% 62.64451639758626%)"/>
+<rect y="0" width="1" height="10" x="65" fill="rgb(30.36400314952681% 19.712250991421648% 62.09188356973285%)"/>
+<rect y="0" width="1" height="10" x="64" fill="rgb(30.428120096942507% 19.863550719732143% 61.53992791139503%)"/>
+<rect y="0" width="1" height="10" x="63" fill="rgb(30.488016920775385% 20.013338279000148% 60.9886488342399%)"/>
+<rect y="0" width="1" height="10" x="62" fill="rgb(30.54375627917165% 20.16164567053217% 60.43804564098997%)"/>
+<rect y="0" width="1" height="10" x="61" fill="rgb(30.59539829605842% 20.30850368739769% 59.88811751990623%)"/>
+<rect y="0" width="1" height="10" x="60" fill="rgb(30.643000677493065% 20.453941975970186% 59.33886353897947%)"/>
+<rect y="0" width="1" height="10" x="59" fill="rgb(30.686618820319406% 20.597989093511782% 58.79028263981191%)"/>
+<rect y="0" width="1" height="10" x="58" fill="rgb(30.72630591370408% 20.74067256210711% 58.24237363117035%)"/>
+<rect y="0" width="1" height="10" x="57" fill="rgb(30.76211303407423% 20.882018919224532% 57.69513518219124%)"/>
+<rect y="0" width="1" height="10" x="56" fill="rgb(30.794089233931676% 21.02205376515781% 57.14856581521565%)"/>
+<rect y="0" width="1" height="10" x="55" fill="rgb(30.82228162497573% 21.160801807579893% 56.60266389823161%)"/>
+<rect y="0" width="1" height="10" x="54" fill="rgb(30.84673545592981% 21.298286903419872% 56.05742763689914%)"/>
+<rect y="0" width="1" height="10" x="53" fill="rgb(30.86749418543232% 21.434532098256515% 55.51285506613144%)"/>
+<rect y="0" width="1" height="10" x="52" fill="rgb(30.884599550321346% 21.56955966340538% 54.96894404120428%)"/>
+<rect y="0" width="1" height="10" x="51" fill="rgb(30.898091629614394% 21.703391130862% 54.42569222836289%)"/>
+<rect y="0" width="1" height="10" x="50" fill="rgb(30.90800890445931% 21.836047326249963% 53.88309709489414%)"/>
+<rect y="0" width="1" height="10" x="49" fill="rgb(30.914388314308705% 21.967548399911158% 53.34115589862859%)"/>
+<rect y="0" width="1" height="10" x="48" fill="rgb(30.91726530954921% 22.097913856264056% 52.79986567683529%)"/>
+<rect y="0" width="1" height="10" x="47" fill="rgb(30.91667390079824% 22.227162581545978% 52.25922323446812%)"/>
+<rect y="0" width="1" height="10" x="46" fill="rgb(30.912646705061747% 22.355312870046684% 51.71922513172067%)"/>
+<rect y="0" width="1" height="10" x="45" fill="rgb(30.905214988931845% 22.48238244893166% 51.17986767084209%)"/>
+<rect y="0" width="1" height="10" x="44" fill="rgb(30.894408708987153% 22.608388501746618% 50.64114688216365%)"/>
+<rect y="0" width="1" height="10" x="43" fill="rgb(30.880256549545565% 22.733347690687367% 50.10305850928064%)"/>
+<rect y="0" width="1" height="10" x="42" fill="rgb(30.862785957906624% 22.857276177713154% 49.56559799333114%)"/>
+<rect y="0" width="1" height="10" x="41" fill="rgb(30.842023177208316% 22.98018964457576% 49.0287604563069%)"/>
+<rect y="0" width="1" height="10" x="40" fill="rgb(30.817993277013095% 23.102103311831496% 48.49254068332786%)"/>
+<rect y="0" width="1" height="10" x="39" fill="rgb(30.7907201817275% 23.223031956898027% 47.95693310380467%)"/>
+<rect y="0" width="1" height="10" x="38" fill="rgb(30.76022669695043% 23.342989931214114% 47.42193177140834%)"/>
+<rect y="0" width="1" height="10" x="37" fill="rgb(30.726534533836586% 23.46199117655563% 46.887530342758504%)"/>
+<rect y="0" width="1" height="10" x="36" fill="rgb(30.689664331552996% 23.580049240558054% 46.353722054734964%)"/>
+<rect y="0" width="1" height="10" x="35" fill="rgb(30.64963567789929% 23.697177291491794% 45.820499700307843%)"/>
+<rect y="0" width="1" height="10" x="34" fill="rgb(30.606467128155085% 23.813388132333618% 45.28785560277358%)"/>
+<rect y="0" width="1" height="10" x="33" fill="rgb(30.560176222210667% 23.928694214174706% 44.75578158827292%)"/>
+<rect y="0" width="1" height="10" x="32" fill="rgb(30.51077950003079% 24.043107649002837% 44.224268956456886%)"/>
+<rect y="0" width="1" height="10" x="31" fill="rgb(30.458292515495355% 24.156640221894032% 43.69330844915346%)"/>
+<rect y="0" width="1" height="10" x="30" fill="rgb(30.40272984865435% 24.269303402646397% 43.162890216874894%)"/>
+<rect y="0" width="1" height="10" x="29" fill="rgb(30.34410511642897% 24.38110835688705% 42.63300378299005%)"/>
+<rect y="0" width="1" height="10" x="28" fill="rgb(30.282430981785% 24.492065956680636% 42.103638005369665%)"/>
+<rect y="0" width="1" height="10" x="27" fill="rgb(30.217719161399115% 24.60218679066672% 41.574781035294106%)"/>
+<rect y="0" width="1" height="10" x="26" fill="rgb(30.149980431833256% 24.71148117375087% 41.04642027339202%)"/>
+<rect y="0" width="1" height="10" x="25" fill="rgb(30.079224634227325% 24.81995915637344% 40.51854232235639%)"/>
+<rect y="0" width="1" height="10" x="24" fill="rgb(30.00546067751431% 24.927630533377965% 39.99113293615773%)"/>
+<rect y="0" width="1" height="10" x="23" fill="rgb(29.928696540157773% 25.03450485250016% 39.46417696544708%)"/>
+<rect y="0" width="1" height="10" x="22" fill="rgb(29.84893927040502% 25.14059142249695% 38.937658298808236%)"/>
+<rect y="0" width="1" height="10" x="21" fill="rgb(29.766194985044875% 25.2458993209341% 38.411559799484146%)"/>
+<rect y="0" width="1" height="10" x="20" fill="rgb(29.68046886665314% 25.350437401649456% 37.88586323716168%)"/>
+<rect y="0" width="1" height="10" x="19" fill="rgb(29.59176515930264% 25.454214301908296% 37.3605492143544%)"/>
+<rect y="0" width="1" height="10" x="18" fill="rgb(29.500087162709926% 25.557238449265973% 36.835597086872296%)"/>
+<rect y="0" width="1" height="10" x="17" fill="rgb(29.4054372247835% 25.659518068152287% 36.310984877810315%)"/>
+<rect y="0" width="1" height="10" x="16" fill="rgb(29.30781673253285% 25.76106118619123% 35.786689184423437%)"/>
+<rect y="0" width="1" height="10" x="15" fill="rgb(29.20722610129088% 25.86187564026877% 35.262685077182626%)"/>
+<rect y="0" width="1" height="10" x="14" fill="rgb(29.10366476219461% 25.96196908236095% 34.73894599022385%)"/>
+<rect y="0" width="1" height="10" x="13" fill="rgb(28.99713114786251% 26.06134898513357% 34.21544360230799%)"/>
+<rect y="0" width="1" height="10" x="12" fill="rgb(28.88762267619829% 26.16002264732425% 33.69214770730257%)"/>
+<rect y="0" width="1" height="10" x="11" fill="rgb(28.77513573224251% 26.25799719891714% 33.16902607307423%)"/>
+<rect y="0" width="1" height="10" x="10" fill="rgb(28.659665647985094% 26.3552796061197% 32.64604428754083%)"/>
+<rect y="0" width="1" height="10" x="9" fill="rgb(28.541206680040426% 26.451876676150987% 32.123165590472136%)"/>
+<rect y="0" width="1" height="10" x="8" fill="rgb(28.41975198507848% 26.54779506184955% 31.600350689443524%)"/>
+<rect y="0" width="1" height="10" x="7" fill="rgb(28.295293592891585% 26.64304126610969% 31.077557558135355%)"/>
+<rect y="0" width="1" height="10" x="6" fill="rgb(28.16782237696611% 26.737621646153237% 30.55474121492455%)"/>
+<rect y="0" width="1" height="10" x="5" fill="rgb(28.037328022413416% 26.83154241764458% 30.031853479431725%)"/>
+<rect y="0" width="1" height="10" x="4" fill="rgb(27.903798991100637% 26.92480965865566% 29.5088427043559%)"/>
+<rect y="0" width="1" height="10" x="3" fill="rgb(27.76722248380531% 27.01742931348746% 28.985653479544865%)"/>
+<rect y="0" width="1" height="10" x="2" fill="rgb(27.62758439920018% 27.10940719635448% 28.462226304798716%)"/>
+<rect y="0" width="1" height="10" x="1" fill="rgb(27.48486928945562% 27.20074899493781% 27.93849722737642%)"/>
+<rect y="0" width="1" height="10" x="0" fill="rgb(27.339060312224994% 27.29146027381264% 27.41439743955457%)"/>
+</g>
+</svg>
