use utf8;

sub disptap {
	return map {
		!m/\A(-?)(\d)(\d)/ ? $_ :
		sprintf('<td%s>%s<br>%s',
			' class=ex' x !!$1,
			'·' x $2, '·' x $3,
		);
	} @_;
}

my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);

(
'Uppercase' => [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' => [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 }],
'Sütterlin' => [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 }],
'Old Roman Cursive' => [
	map { /^\w/ ? '<svg width="20" height="20" viewBox="5 225 28 45"><path d="'.$_.'"/></svg>' : $_ }
	"m 9.7966963,233.64839 c 1.9349047,4.6581 17.4141427,19.56404 17.4141427,19.56404 M 8.8650753,258.0405 17.679641,245.75946",
	"m 8.2859683,233.93504 c 0,0 6.5438297,-3.56736 8.4562497,2.86653 1.38905,4.67312 0.39098,21.06633 6.59301,19.20572 2.86653,-0.85996 4.58644,-3.00985 4.58644,-3.00985 m -14.84083,-3.65482 c -11.2172001,9.19952 -0.12626,13.80702 1.43325,7.02298",
	"m 14.579584,240.38472 8.45625,-4.87309 m -9.17289,8.7429 c 0,0 -4.1564597,16.15085 6.01971,13.47267",
	"m 10.187496,230.36768 c 0,0 15.43006,23.12513 15.71671,27.09324 m -5.11056,-9.76656 c -12.0394097,4.29979 -8.88624,20.06568 2.86652,6.87966",
	"m 10.586898,246.54775 9.45953,0.28666 m 5.4464,-16.46673 c 0,0 -14.90593,2.42075 -10.60614,35.9591",
	"m 13.108831,249.98758 11.03612,-4.87309 m -7.5963,-8.31292 16.05255,-9.02956 M 3.4754013,265.23104 c 0,0 7.9135097,6.73875 11.3533397,-6.6889 3.43983,-13.42765 3.43983,-22.60053 3.43983,-22.60053",
	"m 11.344837,238.95146 15.19258,-4.87309 m -16.37398,8.58517 c -3.5915897,11.9003 8.63168,20.00759 12.55933,14.16049 l 1.6198,6.78546",
	"m 21.047523,245.54447 9.02955,-1.00328 m -19.77903,0.71663 c 10.03284,0.14332 12.46939,-2.74357 12.32606,12.89936 M 6.0024733,230.97576 c 5.4421897,-0.20269 3.8656,27.56638 3.8656,27.56638",
	'>', # i = j
	"m 18.254694,242.9646 -0.42998,15.57754",
	"m 24.298444,237.25928 -11.41234,8.25108 9.1827,8.57252 m -8.55222,-21.67887 -1.75469,28.5974",
	"m 11.205353,230.36768 c 0,0 -2.5381497,20.65982 1.39849,22.65013 10.92663,5.52433 13.05287,4.57023 13.05287,4.57023",
	"m 3.5407243,260.23445 5.87812,-21.68826 7.9050697,12.76972 4.25657,-11.75625 10.94548,9.32392",
	"m 9.5258083,261.6533 2.8377097,-21.08017 10.1347,19.05323 4.05388,-20.67478",
	"m 16.422109,242.60007 c -5.47274,0.81078 -3.47429,13.92701 1.62155,11.14817 9.84072,-5.3663 1.82425,-10.74278 1.82425,-10.74278",
	"m 15.404684,243.61354 c 0,0 -3.04041,17.43168 4.05388,12.97241 m -8.10776,-16.4182 13.3778,6.28351",
	"m 10.672413,237.73542 21.08017,26.35021 m -20.87748,-24.32327 c -9.1212296,3.2431 -6.0808197,9.32392 -6.0808197,9.32392 0,0 5.4727397,5.27004 12.5670297,-1.21616",
	"m 4.8655023,238.74889 c 6.0808197,-2.43234 6.4862097,-2.83773 12.9724097,0.40538 4.78633,2.39317 7.29698,6.89161 13.3778,3.24311 m -15.20204,-3.4458 -5.47274,24.93136",
	"m 34.256454,230.64113 c 0,0 -10.58398,5.28535 -17.9029,8.81482 -3.67044,7.38064 -2.15569,11.07749 -5.4069,20.37311 -1.1252097,3.21711 -9.12123,4.25657 -9.12123,4.25657",
	"m 16.823534,243.81623 c 0,0 -1.62155,18.24246 5.87812,11.55356 M 8.3103943,240.37044 27.769014,239.96505",
	'>', # u = v
	"m 9.0086423,236.11386 c 0,0 6.6888997,11.14817 12.7697197,6.28352 6.08082,-4.86466 5.27005,-6.08082 5.27005,-6.08082",
	'',
	"m 11.948695,268.77453 c -1.62156,-14.39127 13.58049,-39.32263 13.58049,-39.32263 M 6.8813453,243.84317 c 0.20269,1.01347 22.2963397,2.83772 22.2963397,2.83772",
	"m 4.9289653,239.8092 c 4.44908,-7.43435 11.3160897,-5.14113 12.3295597,2.96663 l 0.20269,23.71519 c 0,0 -0.10134,-9.32393 -0.12668,-23.2338 -0.0163,-8.91571 9.90666,-8.94388 13.80852,-6.05549",
	"m 12.020439,237.63036 c 9.02956,-1.71991 6.59301,5.87638 6.59301,5.87638 -1.78773,5.95591 -3.91891,10.78875 -1.86323,12.18274 2.70729,1.83586 7.30963,0.28664 7.30963,0.28664",
],
'Sutton <abbr title="American Sign Lanugage">ASL</abbr>' => [
	# 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
}],
'Braille' => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
'5-point Tactile' => [
	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' => [map {tr/.-/‧‑/r} qw{
	.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
	-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
}],
'Tap code' => [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
})],
'Tap simplified' => [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
})],
'Maritime flags' => [
	# 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"/>
	},
],
'Flag semaphore' => [
	map {
		local $_ = $_;
		s/[1-4]\K(?=[4-9])/ /;
		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 semaphore' => [
	map {
		my ($r, $pr, $pl) = split //, $_;
		/^\D$/ ? $_ : sprintf(
			join('',
				'<svg width="20" 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 semaphore' => [
	map { /^\D+$/ ? $_ : sprintf
		join('',
			'<svg width="20" 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
	)
],
'Code 39' => [
	# ISO/IEC 16388
	map { tr/012/ ❘❙/r } qw(
		211012 121012 221011 112012 212011 122011 111022 211021 121021 112021
		211102 121102 221101 112102 212101 122101 111202 211201 121201 112201
		201112 102112 202111 101212 201211 102211
	)
],
'Code 128' => [
	map { tr/1-3-/❘❙❚ /r }
	# bar widths (1-3) followed by space of width 1 (implied) or 3 (-)
	qw(
		11-2 1-12 1-1-2 12-1 1-21 1-2-1 21-1 2-11 2-1-1 123  12-3 1-23 132
		13-2 1-32 332   21-3 2-13 231   23-1 233  312   31-2 3-12 321  32-1
	)
],
'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
	map { sprintf
		'<svg width="20" height="20" viewBox="0 0 8 6">'
		. '<path d="M1%s"/></svg>',
		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
	)
],
'Pigpen' => [
	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 stroke-linecap="square" 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' => [
	map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
	map { sprintf
		'<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
		. '<path%s d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
		' stroke-linecap="round" stroke-linejoin="round"',
		'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
	),
],
'Chromacons' => [
	# Colour Alphabet by Paul Green-Armytage (2010)
	map { sprintf '<span style="background:#%s" title="%s">%s</span>', split(/:/, $_), chr(8195) }
	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
	},
],
);
