);
}
-sub disprgb {
- my ($index) = @_;
- my $circle = '<circle cx="%s" cy="%s" r="8" fill="#%X%X%X"/>';
+sub disphues {
+ my ($index, $hues, $opaque) = @_;
+ my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
+ my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
+ ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
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
);
}
'M3,4',
],
},
+edgewrite => {
+ title => 'EdgeWrite',
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ list => [
+ map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
+ map {
+ my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } split //; # x,y,
+ sprintf('<circle cx="%s" cy="%s" r="1"/>', @coords[0, 1]) . # start point
+ sprintf('<path d="M%s"/>', "@coords")
+ }
+ # corners (0..3) clockwise from top-left in order
+ qw(
+ 213 0232 1023 1323 01023 102 10132 0213 02 132 02123 023 20313 2031
+ 10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123 01
+ )
+ ],
+},
#graffiti => {
# title => 'Palm Graffiti',
#},
style => [
'svg { isolation: isolate }',
'svg circle { mix-blend-mode: screen }',
+ '.sample { background: black }',
+ ],
+ list => [
+ map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+ 0 .. 3*3*3 - 1
+ ],
+},
+cmymap => {
+ title => 'CMYmap',
+ style => [
+ 'svg { isolation: isolate }', # mix on white
+ 'svg circle { mix-blend-mode: multiply }',
+ '.sample { background: white }',
+ ],
+ list => [
+ map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
+ 0 .. 3*3*3 - 1
],
- list => [ map { disprgb($_) } 0 .. 3*3*3 ],
},
dni => {
title => "D'ni",