writing-latn.inc.pl

   1 use 5.014;
   2 use utf8;
   3 use List::Util qw( pairs pairmap sum );
   4
   5 my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
   6 my $U = 0;  # optional unicode alternatives
   7
   8 my @wrapstyle = (
   9         'td { white-space: normal; word-spacing: 5em }', # force line break between words
  10         '.sample { word-spacing: 0 }',
  11         '.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
  12 );
  13 my $spacestyle = '.sample span { margin-right: 0.5ex }';  # separate multiple letters
  14 my @tapstyle = (
  15         @wrapstyle,
  16         '{ line-height: 1ex }',
  17         '.sample { font-size: 80% }',
  18 );
  19
  20 sub disptap {
  21         my $code = shift;
  22         my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
  23         if ($U) {
  24                 # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
  25                 return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
  26         }
  27         return $prefix . join(' ', map { '·' x $_ } @dots);
  28 }
  29
  30 sub dispbar {
  31         my $code = shift or return '';
  32
  33         return join '', pairmap {
  34                 ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/  /dr)
  35         } split //, $code if $U;
  36
  37         my @cols = split //, $code;  # bar and space widths
  38         my $width = sum(@cols);
  39         return sprintf(
  40                 '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
  41                 $width * 2, 14, $width, 7, join(' ',
  42                         'M0,0',
  43                         map {
  44                                 join('m1,-7', ('v7') x $_->[0]),  # line per bar width
  45                                 (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()),  # space forward
  46                         }
  47                         pairs @cols
  48                 )
  49         );
  50 }
  51
  52 sub disphues {
  53         my ($index, $hues) = @_;
  54         my @lum = ($index % 3, $index / 3 % 3, $index / 9);  # hue opacities (0..2)x3
  55         my @lumf = ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)');
  56         return sprintf(
  57                 '<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
  58                 join '', map {
  59                         my $colf = $lumf[ $lum[$_] ];
  60                         !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
  61                                 10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
  62                         );
  63                 } 0 .. 2
  64         );
  65 }
  66
  67 (
  68 uppercase => {
  69         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 }],
  70 },
  71 lowercase => {
  72         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 }],
  73 },
  74 suetterlin => {
  75         title => 'Sütterlin',
  76         style => [
  77                 '@font-face {
  78                         font-family: Suetterlin; /* R. G. Arens */
  79                         src: url("/suetterlin.ttf");
  80                 }',
  81                 'td { font-family: Suetterlin }',
  82         ],
  83         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 }],
  84 },
  85 roman => {
  86         title => 'Old Roman Cursive',
  87         style => [
  88                 'svg path { stroke-linecap: round; stroke-linejoin: round }',
  89                 '.sample span { margin-right: -10px }',
  90         ],
  91         list => [
  92                 map {
  93                         !m/^(-?)(\w.+)/ ? $_ :
  94                         $1.'<svg width="20" height="20" viewBox="0 0 12 20"><path d="'.$2.'"/></svg>'
  95                 }
  96                 "m2,4 c1,2 8,9 8,9 M2,15 6,9",
  97                 "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",
  98                 "m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
  99                 "m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
 100                 "m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
 101                 "m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
 102                 "m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
 103                 "m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
 104                 '>', # i = j
 105                 "m6,8 -0,7",
 106                 "-m9,5 -5,4 4,4 m-4,-10 -1,13",
 107                 "m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
 108                 "m0,16 3,-10 4,6 2,-5 5,4",
 109                 "m2,16 1,-9 5,8 2,-9",
 110                 "m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
 111                 "m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
 112                 "m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
 113                 "m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
 114                 "m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
 115                 "m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
 116                 '>', # u = v
 117                 "m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
 118                 '-',
 119                 "m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
 120                 "-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
 121                 "-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
 122         ],
 123 },
 124 sutton => {
 125         title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
 126         style => $spacestyle,
 127         list => [
 128                 # American manual alphabet in Sutton (U+1D800+) notation
 129                 map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
 130                 8F7a9c    847a9c    86Da9c    801a9c    84Aa9c
 131                 8CEa9c    8F0       815aa2    892a9c    892a9c9A2aac
 132                 840a9c    8DCa9c    88Da9c
 133                 819a9c    876a9c    840a9caA1 8F0a9caA1 81Aa9c
 134                 903a9c    8FBa9c    815a9c    80Ea9c    887a9c
 135                 806a9c    89Aa9c    800a9c945aaa
 136                 0         965aa6
 137         }],
 138 },
 139 unistrokes => {
 140         title => 'Unistrokes',
 141         style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 142         list => [
 143                 map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
 144                 map {
 145                         sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
 146                         (!!$3 && qq(<path d="$_"/>))
 147                 }
 148                 'M3,8 V0',
 149                 'M0,0 6,4 0,8',
 150                 'M6,0 0,4 6,8',
 151                 'M6,0 0,4 6,8',
 152                 'M6,4 H0',
 153                 'M6,0 0,0 0,8',
 154                 'M0,8 6,8 6,0',
 155                 'M0,0 6,0 6,8',
 156                 'M3,0 V8',
 157                 'M6,0 6,8 0,8',
 158                 'M0,8 6,0',
 159                 'M0,0 0,8 6,8',
 160                 'M6,8 3,0 0,8',
 161                 'M0,8 3,0 6,8',
 162                 'M6,0 Q0,6 3,8 6,6 0,0',
 163                 'M0,0 Q4,8 6,4 4,0 0,8',
 164                 'M6,0 Q2,8 0,4 2,0 6,8',
 165                 'M0,0 6,8',
 166                 'M6,0 0,0 6,8 0,8',
 167                 'M0,4 H6',
 168                 'M6,0 3,8 0,0',
 169                 'M0,0 3,8 6,0',
 170                 'M0,0 0,8 6,0 6,8',
 171                 'M0,0 Q6,6 3,8 0,6 6,0',
 172                 'M6,0 0,8',
 173                 'M0,0 6,0 0,8 6,8',
 174                 'M3,4',
 175         ],
 176 },
 177 #graffiti => {
 178 #       title => 'Palm Graffiti',
 179 #},
 180 ita2 => {
 181         title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
 182         style => [@wrapstyle, 'td { font-size: 50% }'],
 183         list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
 184                 11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
 185                 00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
 186                 00100
 187         )],
 188 },
 189 braille => {
 190         list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
 191 },
 192 tactile => {
 193         title => '5-point Tactile',
 194         list => [
 195                 map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
 196                 map {
 197                         join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
 198                                 !$_ ?  9 : $_ & 1 ? 4 : 14,
 199                                 !$_ ? 12 : $_ < 3 ? 4 : 20,
 200                         } split //
 201                 }
 202                 qw{
 203                         4 234 012 14 0 014 023 12
 204                         02 024 0134 23 013 03 01 123
 205                         0124 13 04 1 34 0123 134 0234
 206                         034 124
 207                 }
 208         ],
 209 },
 210 morse => {
 211         style => $spacestyle,
 212         list => [map {tr/.-/‧‑/r} qw{
 213                 .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
 214                 -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
 215         }],
 216 },
 217 tap => {
 218         title => 'Tap code',
 219         style => \@tapstyle,
 220         list => [map { disptap($_) } qw{
 221                 11 12 13 14 15 21 22 23  > 24 25 31 32
 222                 33 34 35 41 42 43 44 45 51 52 53 54 55
 223         }],
 224 },
 225 shorttap => {
 226         title => 'Short Tap',
 227         style => \@tapstyle,
 228         list => [map { disptap($_) } qw{
 229                 11 12 13 14 21 22 23 20 > 31 -13 32 33
 230                 30 41 42 -13 43 40 10 51 52 53 50 -31 -40
 231         }],
 232 },
 233 cards => {
 234         style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
 235         list => [(
 236                 map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
 237                 1 .. 11, 13, 14  # A 2-10 J Q K
 238         ), '', chr(0x1F0CF), chr(0x1F0DF) ],
 239 },
 240 maritime => {
 241         title => 'Maritime flags',
 242         style => $spacestyle,
 243         list => [
 244                 # International Code of Signals, SVG fills
 245                 map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
 246                 split /\n\n/, qq{
 247                         <path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
 248                         <path fill="white" d="M0,0 h15 v30 h-15"/>
 249
 250                         <path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
 251
 252                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 253                         <path fill="white" d="M0,6  h30 v18 h-30" />
 254                         <path fill="$C{red}" d="M0,12 h30 v6  h-30" />
 255
 256                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 257                         <path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
 258
 259                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 260                         <path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
 261
 262                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 263                         <path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
 264
 265                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 266                         <path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
 267                         <path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
 268                         <path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
 269
 270                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 271                         <path fill="white" d="M0,0 h15 v30 h-15"/>
 272
 273                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 274                         <circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
 275
 276                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 277                         <path fill="white" d="M0,10 h30 v10 h-30"/>
 278
 279                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 280                         <path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
 281
 282                         <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
 283                         <path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
 284
 285                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 286                         <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
 287
 288                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 289                         <path fill="$C{blue}" d="
 290                                 M0,0     h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 291                                 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 292                                 m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 293                                 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 294                         "/>
 295
 296                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 297                         <path fill="$C{red}" d="M0,0 h30 v30"/>
 298
 299                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 300                         <path fill="white" d="M10,10 h10 v10 h-10"/>
 301
 302                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 303
 304                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 305                         <path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
 306                         <path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
 307
 308                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 309                         <path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
 310
 311                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 312                         <path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
 313                         <path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
 314
 315                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 316                         <path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
 317
 318                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 319                         <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
 320
 321                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 322                         <path fill="white" d="M5,5 h20 v20 h-20"/>
 323                         <path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
 324
 325                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 326                         <path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
 327                         <path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
 328
 329                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 330                         <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6 M24,0h6l-30,30v-6
 331                                 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
 332
 333                         <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
 334                         <path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
 335                         <path fill="$C{yellow}" d="M0,0  h31 l-15,15"/>
 336                         <path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
 337
 338
 339
 340                         <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
 341                         <path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
 342
 343                         <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
 344                         <path fill="white" d="M15,10 30,15 15,20"/>
 345                 },
 346         ],
 347 },
 348 flag => {
 349         title => 'Flag semaphore',
 350         list => [
 351                 map {
 352                         local $_ = $_;
 353                         s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
 354                         tr/1-9/↙←↖↑↗→↘↓/;
 355                         s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
 356                         $_
 357                 }
 358                 qw(
 359                         1 2 3 4 5  6 7 21 31 46  14 51 16 17 23
 360                         24 25 26 27 34  35 47 56 57 36  67
 361                 )
 362         ],
 363 },
 364 chappe => {
 365         title => 'Chappe semaphore',
 366         list => [
 367                 map {
 368                         my ($r, $pr, $pl) = split //, $_;
 369                         /^\D$/ ? $_ : sprintf(
 370                                 join('',
 371                                         '<svg width="16" height="20" viewBox="0 0 10 15">',
 372                                         '<path d="M5,6 v7"/>',
 373                                         '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
 374                                         '</svg>',
 375                                 ),
 376                                 ['6', '3v3', '9v-3']->[$pl],
 377                                 [ '',  'v3',  'v-3']->[$pr],
 378                                 $r * 45,
 379                         );
 380                 }
 381                 # 360° rotation (0-7) and position state (0-2) of left and right bars
 382                 qw(
 383                   021 121 221 321 421 521 621 721
 384                   > 022 122 222 322 011 111 211 311
 385                   001 101 201 301 401 501 601 701 020
 386                 )
 387         ],
 388 },
 389 prussian => {
 390         title => 'Prussian semaphore',
 391         list => [
 392                 map { /^\D+$/ ? $_ : sprintf
 393                         join('',
 394                                 '<svg width="10" height="20" viewBox="0 0 8 18">',
 395                                 '<path d="M4,1 v18"/>',
 396                                 (map {(
 397                                         qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
 398                                         qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
 399                                 )} 3, 7, 14),
 400                                 '</svg>',
 401                         ),
 402                         map { ($_ - 2) * 45 % 360 } split //, $_
 403                 }
 404                 # rotation state (0-3) for left and right bar of 3 rows
 405                 qw(
 406                         003000 000200 203300 000030 033030 000130 000330 032330 > 031330
 407                         022020 130120 001320 233010 030210 022310 203001 233001
 408                         131001 231301 000202 023302 230003 032003 201003 101003
 409                 )
 410         ],
 411 },
 412 code39 => {
 413         title => 'Code 39',
 414         list => [map { dispbar($_) } qw(
 415                 2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
 416                 1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
 417                 2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
 418                 1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
 419                 2211211111 1221211111            1221112111 0 1211212111
 420         )], # ISO/IEC 16388
 421 },
 422 code93 => {
 423         title => 'Code 93',
 424         list => [map { dispbar($_) } qw(
 425                 211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
 426                 132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
 427                 221121 222111 112122 112221 122121 123111        311211 0 111141
 428         )],
 429 },
 430 code128 => {
 431         title => 'Code 128',
 432         list => [map { dispbar($_) } qw(
 433                 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
 434                 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
 435                 213131 311123 311321 331121 312113 312311        212222 0 211412 2331112
 436         )],
 437 },
 438 rm4scc => {
 439         title => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
 440         list => [
 441                 map {
 442                         my $len = length $_;
 443                         !$len ? '' : sprintf(
 444                                 '<svg width="%d" height="20" viewBox="0 0 %d 6">'
 445                                 . '<path d="M1%s"/></svg>',
 446                                 $len * 5, $len * 2,
 447                                 join ' m2',
 448                                 map { sprintf ',%dv%dm0,-%d',
 449                                         ($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
 450                                         ($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
 451                                 }
 452                                 split //
 453                         );
 454                 }
 455                 qw(
 456                                                                 2121 2301
 457                         0132 0312 0330 2112 2130 2310
 458                         1023 1203 1221 3003 3021 3201
 459                         1032 1212 1230 3012 3030 3210
 460                         1122 1302 1320 3102 3120 3300
 461                         0033
 462                 ), # 0 for space
 463                 '', 1, 3  # start/end
 464         ],
 465 },
 466 rgbmap => {
 467         title => 'RGBmap',
 468         style => [
 469                 'svg { isolation: isolate }',
 470                 'svg circle { mix-blend-mode: screen }',
 471         ],
 472         list => [ map { disphues($_, [0, 240, 120]) } 0 .. 3*3*3 ], # Red, Blue, Green
 473 },
 474 dni => {
 475         title => "D'ni",
 476         list => [
 477                 map {
 478                         state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
 479                         state $v = [
 480                                 '',
 481                                 'M0,4 8,4',
 482                                 'M0,8 Q4,4 8,8',
 483                                 'M0,4 4,8 8,4',
 484                                 'M2,0 2,4 8,4',
 485                                 'M0,0 8,8 M0,8 8,0', # cross
 486                                 'M3.5,4 h1', # dot
 487                         ];
 488                         state $h = [
 489                                 '',
 490                                 'M4,0 4,8',
 491                                 'M0,0 Q4,4 0,8',
 492                                 'M4,-.5 0,4 4,8.5',
 493                                 'M4,8 4,2 8,2',
 494                         ];
 495                         sprintf '<svg width="16" height="16" viewBox="-.5 -.5 9 9"><path d="%s"/></svg>',
 496                                 $window . ($h->[$_ % 5] . $v->[$_ / 5] || $v->[6]);
 497                 } 0 .. 5*5
 498         ],
 499 },
 500 pigpen => {
 501         style => [
 502                 'svg path { stroke-linecap: square }',
 503                 '.sample svg { margin-right: 0.1em }',
 504         ],
 505         list => [
 506                 map {
 507                         qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
 508                 }
 509                 map {
 510                         local $_ = $_;
 511                         s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
 512                         s/[hv]\K|X/6/g;
 513                         s/(?:v|,[^0]).*?v\K/-/;
 514                         s/(?:h|m[^0]).*?h\K/-/;
 515                         m/h/ or s/v/l3,/g;
 516                         m/v/ or s/h([^h]*)/l$1,3/g;
 517                         my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
 518                         qq(<path d="$_"/>$dot)
 519                 }
 520                 qw(
 521                         Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
 522                         Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
 523                         vv  hh  Hhh  Vvv
 524                         vv. hh. Hhh. Vvv.
 525                 ),
 526         ],
 527 },
 528 nyctographs => {
 529         style => [
 530                 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 531                 '.sample svg {
 532                         background: rgba(0,0,0, .1);
 533                         padding: 0.1em;
 534                         margin-right: 0.2em;
 535                 }',
 536         ],
 537         list => [
 538                 map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
 539                 map { sprintf
 540                         '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
 541                         . '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
 542                         'h.5v.5h-.5v-.5',  # start anchor
 543                         map { ['M', 'h0M', 'L']->[$_] }
 544                         split //
 545                 }
 546                 # draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
 547                 qw(
 548                         0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
 549                         0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0
 550                 ),
 551         ],
 552 },
 553 chromacons => {
 554         list => [
 555                 # Colour Alphabet by Paul Green-Armytage (2010)
 556                 map {
 557                         sprintf('<span%s>%s</span>',
 558                                 !!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
 559                                 chr(8195), # em space
 560                         );
 561                 }
 562                 qw{
 563                         F0A3FF:Amethyst 0075DC:Blue      993F00:Caramel  4C005C:Damson   191919:Ebony
 564                         005C31:Forest   2BCE48:Green     FFCC99:Honeydew 808080:Iron     94FFB5:Jade
 565                         8F7C00:Khaki    9DCC00:Lime      C20088:Mallow
 566                         003380:Navy     FFA405:Orpiment  FFA8BB:Pink     426600:Quagmire FF0010:Red
 567                         5EF1F2:Sky      00998F:Turquoise E0FF66:Uranium  740AFF:Violet   990000:Wine
 568                         FFFF80:Xanthin  FFFF00:Yellow    FF5005:Zinnia   0
 569                 }
 570         ],
 571 },
 572 );