4 use List::Util qw( pairs pairmap sum min max );
12 my $U = 0; # optional unicode alternatives
15 'td { white-space: normal; word-spacing: 10em }',
16 # force line break between words
17 '.sample { word-spacing: 0 }',
18 '.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
19 # larger space between letters
21 my $spacestyle = '.sample svg { margin-right: 0.5ex }'; # separate letters
24 '{ line-height: 1ex }',
25 'td:not(.sample) { vertical-align: top }',
26 '.sample { font-size: 80% }',
30 2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
31 1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
34 # Order to put similar sounds close to each other:
41 my @hueletters = ((26) x 27);
42 @hueletters[map { ord($_) - ord('a') } qw(
43 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
48 my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
50 # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
51 return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
53 return $prefix . join(' ', map { '·' x $_ } @dots);
58 my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
59 # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
60 return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
65 my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
66 my ($w, $h) = (max(6, 4 * max(@dots)), 9);
67 my ($w0, $w1) = ($w / $dots[0], $dots[1] ? $w / $dots[1] : 1);
69 '<svg height="20"%s viewBox="-.5 -.5 %s %s">'
70 . '<path d="%s" /></svg>',
71 $prefix && ' style="opacity:.5"',
72 $w + 1, $h + 1, join(' ',
73 "m0,$h l+$w0,-$h" x $dots[0], # slashes
74 "m0,$h l-$w1,-$h" x $dots[1], # backslashes
81 my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
89 T => 'm0,0h2.5h-1.5v1',
96 S => 120, Z => 0, J => 240, L => 30, T => 300, O => 60, I => 180,
97 v => '45,50%', i => '165,50%', o => '165,0%',
99 s/\z(?<!%)/,100%/ for values %col;
101 $code =~ /[Ii]$|T[23]|L3?$|S1|Z$|J1|v3?$/ ? 'gapl1' : (),
102 $code =~ /T$|L2|Z$/ ? 'gapr1' : (),
105 '<svg height="24" viewBox="-.5 -.5 %s 4"%s>'
106 . '<path d="%s" stroke="%s" fill="none"%s /></svg>',
107 $code eq 'I' ? 4 : $code =~ /T3|[LJO]$|[Iio]1/ ? 2 : 3,
108 @gaps ? qq( class="@gaps") : '',
109 $path{$shape}, "hsl($col{$shape},50%)", join('',
110 $rotate && sprintf(' transform="rotate(%s 1 1)"', $rotate * 90),
111 $prefix && ' style="opacity:.5"',
117 my $code = shift or return '';
119 return join '', pairmap {
120 ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/ /dr)
121 } split //, $code if $U;
123 my @cols = split //, $code; # bar and space widths
124 my $width = sum(@cols);
126 '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
127 $width * 2, 14, $width, 7, join(' ',
130 join('m1,-7', ('v7') x $_->[0]), # line per bar width
131 (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()), # space forward
139 my ($index, $hues, $opaque) = @_;
140 $index >= 0 or $index = 26;
141 my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
142 my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
143 ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
145 '<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
147 my $colf = $lumf[ $lum[$_] ];
148 !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
149 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
156 default => [qw( written sign digital touch tactile sound games semaphore barcode personal )],
157 written => [qw( uppercase lowercase suetterlin roman )],
158 digital => [qw( stroke ita2 )],
159 stroke => [qw( graffiti unistrokes edgewrite )],
160 touch => [qw( moon braille )],
162 sound => [qw( morse tap shorttap )],
163 games => [qw( domino tetromino cards )],
164 semaphore => [qw( maritime flag chappe prussian )],
165 barcode => [qw( rm4scc code39 code93 code128 )],
166 personal => [qw( rgbmap cmymap dni pigpen nyctographs chromacons )],
173 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 }],
176 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 }],
182 font-family: Suetterlin; /* R. G. Arens */
183 src: url("/suetterlin.ttf");
185 'td { font-family: Suetterlin }',
186 'td:hover::first-letter { text-transform: uppercase }',
188 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 }],
191 name => 'Old Roman Cursive',
193 'svg path { stroke-linecap: round; stroke-linejoin: round }',
194 '.sample svg { margin-right: -10px }',
199 {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
201 "m2,4 c1,2 8,9 8,9 M2,15 6,9",
202 "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",
203 "m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
204 "m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
205 "m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
206 "m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
207 "m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
208 "m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
211 "-m9,5 -5,4 4,4 m-4,-10 -1,13",
212 "m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
213 "m0,16 3,-10 4,6 2,-5 5,4",
214 "m2,16 1,-9 5,8 2,-9",
215 "m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
216 "m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
217 "m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
218 "m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
219 "m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
220 "m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
222 "m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
224 "m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
225 "-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
226 "-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
230 name => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
231 style => $spacestyle,
233 # American manual alphabet in Sutton (U+1D800+) notation
234 map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
235 8F7a9c 847a9c 86Da9c 801a9c 84Aa9c
236 8CEa9c 8F0 815aa2 892a9c 892a9c9A2aac
238 819a9c 876a9c 840a9caA1 8F0a9caA1 81Aa9c
239 903a9c 8FBa9c 815a9c 80Ea9c 887a9c
240 806a9c 89Aa9c 800a9c945aaa
245 name => 'Palm Graffiti',
248 font-family: Graffiti;
249 src: url("/graffiti.ttf");
251 'td { font-family: Graffiti }',
253 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 }],
256 name => 'Unistrokes',
257 url => 'https://www.google.com/patents/US5596656', # by Xerox
258 style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
260 map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
262 my ($x, $y, $next) = m/\AM(\d+),(\d+)(.)?/;
263 sprintf('<circle cx="%s" cy="%s" r="1"/>', $x, $y) . # start point
264 (defined $next && qq(<path d="$_"/>))
280 'M6,0 Q0,6 3,8 6,6 0,0',
281 'M0,0 Q4,8 6,4 4,0 0,8',
282 'M6,0 Q2,8 0,4 2,0 6,8',
289 'M0,0 Q6,6 3,8 0,6 6,0',
297 url => 'http://depts.washington.edu/ewrite/', # patented US7729542
298 style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
300 map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
302 my @route = split //;
303 my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
304 sprintf('<circle cx="%s" cy="%s" r="1"/><path d="M%s"/>',
305 @coords[0, 1], # start point
307 my $pos = join(',', @coords[$_*2, $_*2 + 1]);
308 $_ > 1 && $route[$_] == $route[$_ - 2] # curve back
309 ? 'Q4,4 '.$pos.'L' : $pos
313 # corners (0..3) clockwise from top-left in order
315 213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
316 10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123 01
321 name => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
322 style => [@wrapstyle, 'td { font-size: 50% }'],
323 list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
324 11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
325 00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
331 map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
333 'M1,0 V4 A2,2 0,0,0 5,4',
334 'M5,0 A4.5,3 0,0,0 5,6',
335 'M1,0 A4.5,3 0,0,1 1,6',
337 'M1,6 V2 A2,2 0,0,1 5,2',
338 'M5,6 V2 A2,2 0,1,0 1,2',
339 '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',
341 'M5,0 V4 A2,2 0,0,1 1,4',
346 'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
347 'M6,4 H2 A2,1 0,0,1 2,2',
348 'M0,4 H4 A2,1 0,0,0 4,2',
352 'M0,0 V3 A3,3 0,0,0 6,3 V0',
354 'M0,6 V3 A3,3 0,0,1 6,3 V6',
359 style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
362 list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
365 name => '5-point Tactile',
367 map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
369 join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
370 !$_ ? 9 : $_ & 1 ? 4 : 14,
371 !$_ ? 12 : $_ < 3 ? 4 : 20,
375 4 234 012 14 0 014 023 12
376 02 024 0134 23 013 03 01 123
377 0124 13 04 1 34 0123 134 0234
383 style => $spacestyle,
384 list => [map {tr/.-/‧‑/r} qw{
385 .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
386 -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
392 list => [map { disptap($_) } qw{
393 11 12 13 14 15 21 22 23 > 24 25 31 32
394 33 34 35 41 42 43 44 45 51 52 53 54 55
400 altlist => [map { disptap($_) } qw{
401 11 12 13 14 21 22 23 20 > 31 -13 32 33
402 30 41 42 -13 43 40 10 51 52 53 50 -31 -40
404 list => [map { dispdash($_) } qw{
405 10 14 -24 12 20 23 22 21 30 -34 13 33 32
406 31 40 43 -13 42 41 11 50 -53 -44 -52 -51 -54
410 name => 'Domino tiles',
412 # enlarge single tile height to span full vertical combinations
413 'td { font-size: 200%; line-height: .6; padding: 0 0 .3ex }',
415 list => [map { dispdomino($_) } qw{
416 10 11 20 21 22 30 31 32 33 40 41 42 43
417 44 50 51 52 53 54 55 60 61 62 63 64 65
422 'svg path { stroke-linecap: square }',
423 '.sample .gapl1 + .gapr1 { margin-left: -6.3px }',
425 name => 'Tetrominos',
426 list => [map { dispblock($_) } qw{
435 style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
437 map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) } # spades, hearts
438 1 .. 11, 13, 14 # A 2-10 J Q K
439 ), '', chr(0x1F0CF), chr(0x1F0DF) ],
442 name => 'Maritime flags',
443 style => $spacestyle,
445 # International Code of Signals, SVG fills
446 map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
448 <path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
449 <path fill="white" d="M0,0 h15 v30 h-15"/>
451 <path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
453 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
454 <path fill="white" d="M0,6 h30 v18 h-30" />
455 <path fill="$C{red}" d="M0,12 h30 v6 h-30" />
457 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
458 <path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
460 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
461 <path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
463 <path fill="white" d="M0,0 h30v30 h-30z"/>
464 <path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
466 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
467 <path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
468 <path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
469 <path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
471 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
472 <path fill="white" d="M0,0 h15 v30 h-15"/>
474 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
475 <circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
477 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
478 <path fill="white" d="M0,10 h30 v10 h-30"/>
480 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
481 <path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
483 <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
484 <path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
486 <path fill="white" d="M0,0 h30v30 h-30z"/>
487 <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11
488 M0,4v22l11,-11 M30,4v22l-11,-11"/>
490 <path fill="white" d="M0,0 h30v30 h-30z"/>
491 <path fill="$C{blue}" d="
492 M0,0 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
493 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
494 m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
495 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
498 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
499 <path fill="$C{red}" d="M0,0 h30 v30"/>
501 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
502 <path fill="white" d="M10,10 h10 v10 h-10"/>
504 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
506 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
507 <path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
508 <path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
510 <path fill="white" d="M0,0 h30v30 h-30z"/>
511 <path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
513 <path fill="white" d="M0,0 h30v30 h-30z"/>
514 <path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
515 <path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
517 <path fill="white" d="M0,0 h30v30 h-30z"/>
518 <path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
520 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
521 <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11
522 M0,4v22l11,-11 M30,4v22l-11,-11"/>
524 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
525 <path fill="white" d="M5,5 h20 v20 h-20"/>
526 <path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
528 <path fill="white" d="M0,0 h30v30 h-30z"/>
529 <path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
530 <path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
532 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
533 <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6
534 M24,0h6l-30,30v-6 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
536 <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
537 <path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
538 <path fill="$C{yellow}" d="M0,0 h31 l-15,15"/>
539 <path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
543 <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
544 <path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
546 <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
547 <path fill="white" d="M15,10 30,15 15,20"/>
552 name => 'Flag semaphore',
556 s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
558 s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
562 1 2 3 4 5 6 7 21 31 46 14 51 16 17 23
563 24 25 26 27 34 35 47 56 57 36 67
568 name => 'Chappe semaphore',
571 my ($r, $pr, $pl) = split //, $_;
572 /^\D$/ ? $_ : sprintf(
574 '<svg width="16" height="20" viewBox="0 0 10 15">',
575 '<path d="M5,6 v7"/>',
576 '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
579 ['6', '3v3', '9v-3']->[$pl],
580 [ '', 'v3', 'v-3']->[$pr],
584 # 360° rotation (0-7) and position state (0-2) of left and right bars
586 021 121 221 321 421 521 621 721
587 > 022 122 222 322 011 111 211 311
588 001 101 201 301 401 501 601 701 020
593 name => 'Prussian semaphore',
595 map { /^\D+$/ ? $_ : sprintf
597 '<svg width="10" height="20" viewBox="0 0 8 18">',
598 '<path d="M4,1 v18"/>',
600 qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
601 qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
605 map { ($_ - 2) * 45 % 360 } split //, $_
607 # rotation state (0-3) for left and right bar of 3 rows
609 003000 000200 203300 000030 033030 000130 000330 032330 > 031330
610 022020 130120 001320 233010 030210 022310 203001 233001
611 131001 231301 000202 023302 230003 032003 201003 101003
617 list => [map { dispbar($_) } qw(
618 2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
619 1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
620 2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
621 1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
622 2211211111 1221211111 1221112111 0 1211212111
627 list => [map { dispbar($_) } qw(
628 211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
629 132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
630 221121 222111 112122 112221 122121 123111 311211 0 111141
635 list => [map { dispbar($_) } qw(
636 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
637 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
638 213131 311123 311321 331121 312113 312311 212222 0 211412 23311120
642 name => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
646 !$len ? '' : sprintf(
647 '<svg width="%d" height="20" viewBox="0 0 %d 6">'
648 . '<path d="M1%s"/></svg>',
651 map { sprintf ',%dv%dm0,-%d',
652 ($_ & 1 ? 0 : 2), 2 + ($_ & 2) + ($_ & 1) * 2,
653 ($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
660 0132 0312 0330 2112 2130 2310
661 1023 1203 1221 3003 3021 3201
662 1032 1212 1230 3012 3030 3210
663 1122 1302 1320 3102 3120 3300
672 'svg { isolation: isolate }',
673 'svg circle { mix-blend-mode: screen }',
674 '.sample { background: black }',
677 map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
678 @hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
684 'svg { isolation: isolate }', # mix on white
685 'svg circle { mix-blend-mode: multiply }',
686 '.sample { background: white }',
689 map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
690 # @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
697 'svg { border: 1px solid currentColor }',
698 '.sample svg + svg { border-left: 0 }',
708 'M0,0 8,8 M0,8 8,0', # cross
719 '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
720 $h->[$_ % 5] . $v->[$_ / 5] || $v->[6],
727 'svg path { stroke-linecap: square }',
728 '.sample svg { margin-right: 0.1em }',
732 qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
736 s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
738 s/(?:v|,[^0]).*?v\K/-/;
739 s/(?:h|m[^0]).*?h\K/-/;
741 m/v/ or s/h([^h]*)/l$1,3/g;
742 my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
743 qq(<path d="$_"/>$dot)
746 Hvh vhv vh hvh vhvh Hhvh hv Vvhv Hhv
747 Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
755 'svg path { stroke-linecap: round; stroke-linejoin: round }',
757 background: rgba(0,0,0, .1);
763 map { s/M[\d,\hM]+(?=[M"])//gr } # clean up superfluous moves
765 '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
766 . '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
767 'h.5v.5h-.5v-.5', # start anchor
768 map { ['M', 'h0M', 'L']->[$_] }
771 # draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
773 0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
774 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
780 title => 'Colour Alphabet by Paul Green-Armytage (2010)',
782 #'.sample { word-break: break-all }',
783 '.sample { background: white }',
787 sprintf('<span%s>%s</span>',
788 !!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
789 chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
793 F0A3FF:Amethyst 0075DC:Blue 993F00:Caramel 4C005C:Damson
794 191919:Ebony 005C31:Forest 2BCE48:Green FFCC99:Honeydew
795 808080:Iron 94FFB5:Jade 8F7C00:Khaki 9DCC00:Lime
796 C20088:Mallow 003380:Navy FFA405:Orpiment FFA8BB:Pink
797 426600:Quagmire FF0010:Red 5EF1F2:Sky 00998F:Turquoise
798 E0FF66:Uranium 740AFF:Violet 990000:Wine FFFF80:Xanthin
799 FFFF00:Yellow FF5005:Zinnia 0