+my $U = 0; # optional unicode alternatives
+
+my @wrapstyle = (
+ 'td { white-space: normal; word-spacing: 10em }',
+ # force line break between words
+ '.sample { word-spacing: 0 }',
+ '.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
+ # larger space between letters
+);
+my $spacestyle = '.sample svg { margin-right: 0.5ex }'; # separate letters
+my @tapstyle = (
+ @wrapstyle,
+ '{ line-height: 1ex }',
+ 'td:not(.sample) { vertical-align: top }',
+ '.sample { font-size: 80% }',
+);
+
+my @hueorder = (
+ 2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
+ 1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
+);
+
+# Order to put similar sounds close to each other:
+# ┌ R Y G C B M X
+# ┌┼──────────────
+# W│ o e y h s f -
+# │muaixqgkdtbp l
+# K│ w n j c z v r
+
+my @hueletters = ((26) x 27);
+@hueletters[map { ord($_) - ord('a') } qw(
+ u a i x q g k d t b p m l w n j c z v r o e y h s f
+)] = @hueorder;
+
+sub disptap {
+ my $code = shift;
+ my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+ if ($U) {
+ # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
+ return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
+ }
+ return $prefix . join(' ', map { '·' x $_ } @dots);
+}
+
+sub dispdomino {
+ my $code = shift;
+ my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+ # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
+ return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
+}
+
+sub dispdash {
+ my $code = shift;
+ my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+ my ($w, $h) = (12, 9);
+ my @w = map { $w / ($_ || 1) } @dots;
+ return sprintf(
+ '<svg height="20" viewBox="-.5 -.5 %s %s">'
+ . '<path d="%s" /></svg>',
+ $w + 1, $h + 1, join(' ',
+ "m0,$h l+$w[0],-$h" x $dots[0], # slashes
+ "m0,$h l-$w[1],-$h" x $dots[1], # backslashes
+ )
+ );
+}
+
+sub dispblock {
+ my $code = shift;
+ my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
+ or return $code;
+ my %path = (
+ S => 'm0,1h1v-1h1',
+ Z => 'm0,0h1v1h1',
+ L => 'm0,0v2h1',
+ v => 'm0,0v1h1',
+ J => 'm1,0v2h-1',
+ T => 'm0,0h2.5h-1.5v1',
+ O => 'm0,0h1v1h-1',
+ I => 'm0,1h3',
+ i => 'm0,1h2',
+ o => 'm0,1h1',
+ );
+ my %col = qw(
+ S 120 Z 0 J 240 L 30 T 300 O 60 I 180
+ v 45,50% i 165,50% o 165,0%
+ );
+ s/\z(?<!%)/,100%/ for values %col;
+ my @gaps = (grep $_,
+ $code =~ /[Ii]$|T[23]|L3?$|S1|Z$|J1|v3?$/ ? 'gapl1' : (),
+ $code =~ /T$|L2|Z$/ ? 'gapr1' : (),
+ );
+ return sprintf(
+ '<svg height="24" viewBox="-.5 -.5 %s 4"%s>'
+ . '<path d="%s" stroke="%s" fill="none"%s /></svg>',
+ $code eq 'I' ? 4 : $code =~ /T3|[LJO]$|[Iio]1/ ? 2 : 3,
+ @gaps ? qq( class="@gaps") : '',
+ $path{$shape}, "hsl($col{$shape},50%)", join('',
+ $rotate && sprintf(' transform="rotate(%s 1 1)"', $rotate * 90),
+ $prefix && ' style="opacity:.5"',
+ ),
+ );
+}
+
+sub dispbar {
+ my $code = shift or return '';
+
+ return join '', pairmap {
+ ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/ /dr)
+ } split //, $code if $U;
+
+ my @cols = split //, $code; # bar and space widths
+ my $width = sum(@cols);
+ return sprintf(
+ '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
+ $width * 2, 14, $width, 7, join(' ',
+ 'M0,0',
+ map {
+ join('m1,-7', ('v7') x $_->[0]), # line per bar width
+ (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()), # space forward
+ }
+ pairs @cols
+ )
+ );
+}
+
+sub disphues {
+ my ($index, $hues, $opaque) = @_;
+ $index >= 0 or $index = 26;
+ 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 12 12">%s</svg>',
+ join '', map {
+ my $colf = $lumf[ $lum[$_] ];
+ !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
+ 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
+ );
+ } 0 .. 2
+ );
+}
+
++{
+default => [qw( written sign digital touch tactile sound games semaphore barcode personal )],
+written => [qw( uppercase lowercase suetterlin roman )],
+digital => [qw( stroke ita2 )],
+stroke => [qw( graffiti unistrokes edgewrite )],
+touch => [qw( moon braille )],
+sign => ['sutton'],
+sound => [qw( morse tap shorttap )],
+games => [qw( domino tetromino cards )],
+semaphore => [qw( maritime flag chappe prussian )],
+barcode => [qw( rm4scc code39 code93 code128 )],
+personal => [qw( rgbmap cmymap dni pigpen nyctographs chromacons )],
+
+order => {
+ name => '#',
+ list => [1 .. 26],
+},
+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 }],
+},
+lowercase => {
+ 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 }],
+},
+suetterlin => {
+ name => 'Sütterlin',
+ style => [
+ '@font-face {
+ font-family: Suetterlin; /* R. G. Arens */
+ src: url("/suetterlin.ttf");
+ }',
+ 'td { font-family: Suetterlin }',
+ 'td:hover::first-letter { text-transform: 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 }],
+},
+roman => {
+ name => 'Old Roman Cursive',
+ style => [
+ 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ '.sample svg { margin-right: -10px }',
+ ],
+ list => [
+ map {
+ s{\A-?\K(\w.+)}
+ {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
+ }
+ "m2,4 c1,2 8,9 8,9 M2,15 6,9",
+ "m2,4 c0,0 3,-2 4,1 1,2 0,9 3,9 1,-0 2,-1 2,-1 m-6,-2 c-5,4 -0,6 1,3",
+ "m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
+ "m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
+ "m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
+ "m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
+ "m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
+ "m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
+ '>', # i = j
+ "m6,8 -0,7",
+ "-m9,5 -5,4 4,4 m-4,-10 -1,13",
+ "m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
+ "m0,16 3,-10 4,6 2,-5 5,4",
+ "m2,16 1,-9 5,8 2,-9",
+ "m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
+ "m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
+ "m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
+ "m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
+ "m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
+ "m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
+ '>', # u = v
+ "m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
+ '-',
+ "m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
+ "-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
+ "-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
+ ],
+},
+sutton => {
+ name => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
+ style => $spacestyle,
+ list => [
+ # American manual alphabet in Sutton (U+1D800+) notation
+ map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
+ 8F7a9c 847a9c 86Da9c 801a9c 84Aa9c
+ 8CEa9c 8F0 815aa2 892a9c 892a9c9A2aac
+ 840a9c 8DCa9c 88Da9c
+ 819a9c 876a9c 840a9caA1 8F0a9caA1 81Aa9c
+ 903a9c 8FBa9c 815a9c 80Ea9c 887a9c
+ 806a9c 89Aa9c 800a9c945aaa
+ 0 965aa6
+ }],
+},
+graffiti => {
+ name => 'Palm Graffiti',
+ style => [
+ '@font-face {
+ font-family: Graffiti;
+ src: url("/graffiti.ttf");
+ }',
+ 'td { font-family: Graffiti }',
+ ],
+ 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 * y z }],
+},
+unistrokes => {
+ name => 'Unistrokes',
+ url => 'https://www.google.com/patents/US5596656', # by Xerox
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ list => [
+ map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
+ map {
+ my ($x, $y, $next) = m/\AM(\d+),(\d+)(.)?/;
+ sprintf('<circle cx="%s" cy="%s" r="1"/>', $x, $y) . # start point
+ (defined $next && qq(<path d="$_"/>))
+ }
+ 'M3,8 V0',
+ 'M0,0 6,4 0,8',
+ 'M6,0 0,4 6,8',
+ 'M6,0 0,4 6,8',
+ 'M6,4 H0',
+ 'M6,0 0,0 0,8',
+ 'M0,8 6,8 6,0',
+ 'M0,0 6,0 6,8',
+ 'M3,0 V8',
+ 'M6,0 6,8 0,8',
+ 'M0,8 6,0',
+ 'M0,0 0,8 6,8',
+ 'M6,8 3,0 0,8',
+ 'M0,8 3,0 6,8',
+ 'M6,0 Q0,6 3,8 6,6 0,0',
+ 'M0,0 Q4,8 6,4 4,0 0,8',
+ 'M6,0 Q2,8 0,4 2,0 6,8',
+ 'M0,0 6,8',
+ 'M6,0 0,0 6,8 0,8',
+ 'M0,4 H6',
+ 'M6,0 3,8 0,0',
+ 'M0,0 3,8 6,0',
+ 'M0,0 0,8 6,0 6,8',
+ 'M0,0 Q6,6 3,8 0,6 6,0',
+ 'M6,0 0,8',
+ 'M0,0 6,0 0,8 6,8',
+ 'M3,4',
+ ],
+},
+edgewrite => {
+ name => 'EdgeWrite',
+ url => 'http://depts.washington.edu/ewrite/', # patented US7729542
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ list => [
+ map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
+ map {
+ my @route = split //;
+ my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
+ sprintf('<circle cx="%s" cy="%s" r="1"/><path d="M%s"/>',
+ @coords[0, 1], # start point
+ join(' ', map {
+ my $pos = join(',', @coords[$_*2, $_*2 + 1]);
+ $_ > 1 && $route[$_] == $route[$_ - 2] # curve back
+ ? 'Q4,4 '.$pos.'L' : $pos
+ } 0 .. $#route),
+ )
+ }
+ # corners (0..3) clockwise from top-left in order
+ qw(
+ 213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
+ 10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123 01
+ )
+ ],
+},
+ita2 => {
+ name => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
+ style => [@wrapstyle, 'td { font-size: 50% }'],
+ list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
+ 11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
+ 00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
+ 00100
+ )],
+},
+moon => {
+ list => [
+ map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
+ 'M0,6 3,0 6,6',
+ 'M1,0 V4 A2,2 0,0,0 5,4',
+ 'M5,0 A4.5,3 0,0,0 5,6',
+ 'M1,0 A4.5,3 0,0,1 1,6',
+ 'M0,6 V0 H6',
+ 'M1,6 V2 A2,2 0,0,1 5,2',
+ 'M5,6 V2 A2,2 0,1,0 1,2',
+ 'M1.5,3 A1.5,1.5 0,0,0 4.5,3 1.5,1.5 0,0,0 1.5,3 M3,1.5 A1,1.5 0,0,0 3,4.5',
+ 'M3,0 V6',
+ 'M5,0 V4 A2,2 0,0,1 1,4',
+ 'M6,0 0,3 6,6',
+ 'M0,0 V6 H6',
+ 'M0,0 H6 V6',
+ 'M0,6 V2 L6,6 V0',
+ 'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
+ 'M6,4 H2 A2,1 0,0,1 2,2',
+ 'M0,4 H4 A2,1 0,0,0 4,2',
+ 'M0,0 6,6',
+ 'M0,6 6,0',
+ 'M0,3 H6',
+ 'M0,0 V3 A3,3 0,0,0 6,3 V0',
+ 'M0,0 3,6 6,0',
+ 'M0,6 V3 A3,3 0,0,1 6,3 V6',
+ 'M0,0 6,3 0,6',
+ 'M6,0 V6 H0',
+ 'M0,0 H6 L2,6 H6',
+ ],
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+},
+braille => {
+ list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
+},
+tactile => {
+ name => '5-point Tactile',
+ list => [
+ map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
+ map {
+ join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
+ !$_ ? 9 : $_ & 1 ? 4 : 14,
+ !$_ ? 12 : $_ < 3 ? 4 : 20,
+ } split //
+ }
+ qw{
+ 4 234 012 14 0 014 023 12
+ 02 024 0134 23 013 03 01 123
+ 0124 13 04 1 34 0123 134 0234
+ 034 124
+ }
+ ],
+},
+morse => {
+ style => $spacestyle,
+ list => [map {tr/.-/‧‑/r} qw{
+ .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
+ -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
+ }],
+},
+tap => {
+ name => 'Tap code',
+ style => \@tapstyle,
+ list => [map { disptap($_) } qw{
+ 11 12 13 14 15 21 22 23 > 24 25 31 32
+ 33 34 35 41 42 43 44 45 51 52 53 54 55
+ }],
+},
+shorttap => {
+ name => 'Short Tap',
+ style => \@tapstyle,
+ list => [map { disptap($_) } qw{
+ 11 12 13 14 21 22 23 20 > 31 -13 32 33
+ 30 41 42 -13 43 40 10 51 52 53 50 -31 -40
+ }],
+ altlist => [map { dispdash($_) } qw{
+ 10 14 -13 12 20 23 22 21 30 -34 13 33 32
+ 31 40 43 -13 42 41 11 50 -23 -50 -1341 -31 -41
+ }],
+},
+domino => {
+ name => 'Domino tiles',
+ style => [
+ # enlarge single tile height to span full vertical combinations
+ 'td { font-size: 200%; line-height: .6; padding: 0 0 .3ex }',
+ ],
+ list => [map { dispdomino($_) } qw{
+ 10 11 20 21 22 30 31 32 33 40 41 42 43
+ 44 50 51 52 53 54 55 60 61 62 63 64 65
+ }],
+},
+tetromino => {
+ style => [
+ 'svg path { stroke-linecap: square }',
+ '.sample .gapl1 + .gapr1 { margin-left: -6.3px }',
+ ],
+ name => 'Tetrominos',
+ list => [map { dispblock($_) } qw{
+ T2 T1 I T3
+ i L1 J L3
+ o1 I1 L2 L -S1 Z1
+ O J2 v2 -J3 S T
+ J1 v1 v v3 i1 Z
+ }],
+},
+cards => {
+ style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
+ list => [(
+ map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) } # spades, hearts
+ 1 .. 11, 13, 14 # A 2-10 J Q K
+ ), '', chr(0x1F0CF), chr(0x1F0DF) ],
+},
+maritime => {
+ name => 'Maritime flags',
+ style => $spacestyle,
+ list => [
+ # International Code of Signals, SVG fills
+ map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
+ split /\n\n/, qq{
+ <path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
+ <path fill="white" d="M0,0 h15 v30 h-15"/>
+
+ <path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M0,6 h30 v18 h-30" />
+ <path fill="$C{red}" d="M0,12 h30 v6 h-30" />
+
+ <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
+
+ <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
+ <path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
+ <path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
+
+ <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M0,0 h15 v30 h-15"/>
+
+ <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+ <circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M0,10 h30 v10 h-30"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
+
+ <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11
+ M0,4v22l11,-11 M30,4v22l-11,-11"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="
+ M0,0 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+ m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+ m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+ m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+ "/>
+
+ <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{red}" d="M0,0 h30 v30"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M10,10 h10 v10 h-10"/>
+
+ <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+
+ <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
+ <path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
+ <path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
+
+ <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11
+ M0,4v22l11,-11 M30,4v22l-11,-11"/>
+
+ <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+ <path fill="white" d="M5,5 h20 v20 h-20"/>
+ <path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
+
+ <path fill="white" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
+ <path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
+
+ <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6
+ M24,0h6l-30,30v-6 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
+
+ <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
+ <path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
+ <path fill="$C{yellow}" d="M0,0 h31 l-15,15"/>
+ <path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
+
+
+
+ <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
+ <path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
+
+ <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
+ <path fill="white" d="M15,10 30,15 15,20"/>
+ },
+ ],
+},
+flag => {
+ name => 'Flag semaphore',
+ list => [
+ map {
+ local $_ = $_;
+ s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
+ tr/1-9/↙←↖↑↗→↘↓/;
+ s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
+ $_
+ }
+ qw(
+ 1 2 3 4 5 6 7 21 31 46 14 51 16 17 23
+ 24 25 26 27 34 35 47 56 57 36 67
+ )
+ ],
+},
+chappe => {
+ name => 'Chappe semaphore',
+ list => [
+ map {
+ my ($r, $pr, $pl) = split //, $_;
+ /^\D$/ ? $_ : sprintf(
+ join('',
+ '<svg width="16" height="20" viewBox="0 0 10 15">',
+ '<path d="M5,6 v7"/>',
+ '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
+ '</svg>',
+ ),
+ ['6', '3v3', '9v-3']->[$pl],
+ [ '', 'v3', 'v-3']->[$pr],
+ $r * 45,
+ );
+ }
+ # 360° rotation (0-7) and position state (0-2) of left and right bars
+ qw(
+ 021 121 221 321 421 521 621 721
+ > 022 122 222 322 011 111 211 311
+ 001 101 201 301 401 501 601 701 020
+ )
+ ],
+},
+prussian => {
+ name => 'Prussian semaphore',
+ list => [
+ map { /^\D+$/ ? $_ : sprintf
+ join('',
+ '<svg width="10" height="20" viewBox="0 0 8 18">',
+ '<path d="M4,1 v18"/>',
+ (map {(
+ qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
+ qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
+ )} 3, 7, 14),
+ '</svg>',
+ ),
+ map { ($_ - 2) * 45 % 360 } split //, $_
+ }
+ # rotation state (0-3) for left and right bar of 3 rows
+ qw(
+ 003000 000200 203300 000030 033030 000130 000330 032330 > 031330
+ 022020 130120 001320 233010 030210 022310 203001 233001
+ 131001 231301 000202 023302 230003 032003 201003 101003
+ )
+ ],
+},
+code39 => {
+ name => 'Code 39',
+ list => [map { dispbar($_) } qw(
+ 2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
+ 1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
+ 2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
+ 1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
+ 2211211111 1221211111 1221112111 0 1211212111
+ )], # ISO/IEC 16388
+},
+code93 => {
+ name => 'Code 93',
+ list => [map { dispbar($_) } qw(
+ 211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
+ 132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
+ 221121 222111 112122 112221 122121 123111 311211 0 111141
+ )],
+},
+code128 => {
+ name => 'Code 128',
+ list => [map { dispbar($_) } qw(
+ 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
+ 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
+ 213131 311123 311321 331121 312113 312311 212222 0 211412 23311120
+ )],
+},
+rm4scc => {
+ name => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
+ list => [
+ map {
+ my $len = length $_;
+ !$len ? '' : sprintf(
+ '<svg width="%d" height="20" viewBox="0 0 %d 6">'
+ . '<path d="M1%s"/></svg>',
+ $len * 5, $len * 2,
+ join ' m2',
+ map { sprintf ',%dv%dm0,-%d',
+ ($_ & 1 ? 0 : 2), 2 + ($_ & 2) + ($_ & 1) * 2,
+ ($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
+ }
+ split //
+ );
+ }
+ qw(
+ 2121 2301
+ 0132 0312 0330 2112 2130 2310
+ 1023 1203 1221 3003 3021 3201
+ 1032 1212 1230 3012 3030 3210
+ 1122 1302 1320 3102 3120 3300
+ 0033
+ ), # 0 for space
+ '', 1, 3 # start/end
+ ],
+},
+rgbmap => {
+ name => 'RGBmap',
+ style => [
+ 'svg { isolation: isolate }',
+ 'svg circle { mix-blend-mode: screen }',
+ '.sample { background: black }',
+ ],
+ list => [
+ map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+ @hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
+ ],
+},
+cmymap => {
+ name => '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
+# @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+ @hueletters
+ ],
+},
+dni => {
+ name => "D'ni",
+ style => [
+ 'svg { border: 1px solid currentColor }',
+ '.sample svg + svg { border-left: 0 }',
+ ],
+ list => [
+ map {
+ state $v = [
+ '',
+ 'M0,4 8,4',
+ 'M0,8 Q4,4 8,8',
+ 'M0,4 4,8 8,4',
+ 'M2,0 2,4 8,4',
+ 'M0,0 8,8 M0,8 8,0', # cross
+ 'M3.5,4 h1', # dot
+ ];
+ state $h = [
+ '',
+ 'M4,0 4,8',
+ 'M0,0 Q4,4 0,8',
+ 'M4,-.5 0,4 4,8.5',
+ 'M4,8 4,2 8,2',
+ ];
+ sprintf(
+ '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
+ $h->[$_ % 5] . $v->[$_ / 5] || $v->[6],
+ );
+ } 0 .. 5*5
+ ],
+},
+pigpen => {
+ style => [
+ 'svg path { stroke-linecap: square }',
+ '.sample svg { margin-right: 0.1em }',
+ ],
+ list => [
+ map {
+ qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
+ }
+ map {
+ local $_ = $_;
+ s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
+ s/[hv]\K|X/6/g;
+ s/(?:v|,[^0]).*?v\K/-/;
+ s/(?:h|m[^0]).*?h\K/-/;
+ m/h/ or s/v/l3,/g;
+ m/v/ or s/h([^h]*)/l$1,3/g;
+ my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
+ qq(<path d="$_"/>$dot)
+ }
+ qw(
+ Hvh vhv vh hvh vhvh Hhvh hv Vvhv Hhv
+ Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
+ vv hh Hhh Vvv
+ vv. hh. Hhh. Vvv.
+ ),
+ ],
+},
+nyctographs => {
+ style => [
+ 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ '.sample svg {
+ background: rgba(0,0,0, .1);
+ padding: 0.1em;
+ margin-right: 0.2em;
+ }',
+ ],
+ list => [
+ map { s/M[\d,\hM]+(?=[M"])//gr } # clean up superfluous moves
+ map { sprintf
+ '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
+ . '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
+ 'h.5v.5h-.5v-.5', # start anchor
+ map { ['M', 'h0M', 'L']->[$_] }
+ split //
+ }
+ # draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
+ qw(
+ 0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
+ 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
+ 0000
+ ),
+ ],
+},
+chromacons => {
+ title => 'Colour Alphabet by Paul Green-Armytage (2010)',
+ style => [
+ #'.sample { word-break: break-all }',
+ '.sample { background: white }',
+ ],
+ list => [
+ map {
+ sprintf('<span%s>%s</span>',
+ !!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
+ chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
+ );
+ }
+ qw{
+ F0A3FF:Amethyst 0075DC:Blue 993F00:Caramel 4C005C:Damson
+ 191919:Ebony 005C31:Forest 2BCE48:Green FFCC99:Honeydew
+ 808080:Iron 94FFB5:Jade 8F7C00:Khaki 9DCC00:Lime
+ C20088:Mallow 003380:Navy FFA405:Orpiment FFA8BB:Pink
+ 426600:Quagmire FF0010:Red 5EF1F2:Sky 00998F:Turquoise
+ E0FF66:Uranium 740AFF:Violet 990000:Wine FFFF80:Xanthin
+ FFFF00:Yellow FF5005:Zinnia 0
+ }
+ ],
+},
+};