);
}
+sub disphues {
+ my ($index, $hues) = @_;
+ my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
+ my @lumf = ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)');
+ return sprintf(
+ '<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
+ join '', map {
+ my $colf = $lumf[ $lum[$_] ];
+ !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
+ 10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
+ );
+ } 0 .. 2
+ );
+}
+
(
uppercase => {
list => [qw{ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z }],
'', 1, 3 # start/end
],
},
+rgbmap => {
+ title => 'RGBmap',
+ style => [
+ 'svg { isolation: isolate }',
+ 'svg circle { mix-blend-mode: screen }',
+ ],
+ list => [ map { disphues($_, [0, 240, 120]) } 0 .. 3*3*3 ], # Red, Blue, Green
+},
dni => {
title => "D'ni",
list => [