writing-latn.inc.pl

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