);
}
-sub disprgb {
- my ($index) = @_;
- my $circle = '<circle cx="%s" cy="%s" r="8" fill="#%X%X%X"/>';
+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 '',
- sprintf($circle, 10, 10, [0, 8, 15]->[$index % 3], 0, 0),
- sprintf($circle, 11, 12, 0, [0, 8, 15]->[$index / 3 % 3], 0),
- sprintf($circle, 12, 10, 0, 0, [0, 8, 15]->[$index / 9]),
+ 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
);
}
'svg { isolation: isolate }',
'svg circle { mix-blend-mode: screen }',
],
- list => [ map { disprgb($_) } 0 .. 3*3*3 ],
+ list => [ map { disphues($_, [0, 240, 120]) } 0 .. 3*3*3 ], # Red, Blue, Green
},
dni => {
title => "D'ni",