-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathelements.flagmeister.js
2116 lines (1868 loc) · 139 KB
/
elements.flagmeister.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/* eslint-disable no-console */
// languages "ar:Arabic:sa,cs:Czech:cz,da:Danish:dk,de:German:de,el:Greek:gr,en:English:gb,en-gb:English:us,es:Spanish,fr:French:fr,fi:Finnish:fi,he:Hebrew:il,hu:Hungarian:hu,it:Italian,ja:Japanse:jp,ko:Korean:kr,nb:Norwegian:no,nl:Dutch:nl,pl:Polish:pl,pt:Brazilian:br,pt-pt:Portugese:pt,ro:Romanian:ro,ru:Russian:ru,sv,tr:Turkish:tr,uk:Ukranian:ua,zh:Chinese:cn"
!(function () {
function log(...args) {
// window.console.log(...args);
}
//-----------------------------------------------------------
// FlagMeister.github.io - One Custom Element for 300+ flags
// license: UNlicense
// This file is optimized for best GZip dowload/performance
//------------------------------------------------------------
// TODO:
// flags with less detail:argentina (face in sun),angola details in knife
// replace #000 in stripes,bars with 0 (illegal color) - saves 35 Bytes
// make colors first parameters
// lazy load delay
// replace "M with "m
// replace [0] and [1] with destructuring
// todo use index number reference to use previous color
// usetransform:(transform,id)=><use transform='${transform}' href='${id}'/>
// learnings:
// ""+"" are concatenated by terser, but ``+"" results in more bytes, thus better to stuff everything into one `` (if `` is really required)
// find colors with capitals regexp: #(?:^|[^A-Z])[A-Z](?![A-Z])
// language codes
// ar, cs, da, de, el, en, en-gb, es, fr, fi, he, hu, it, ja, ko, nb, nl, pl, pt, pt-pt, ro, ru, sv, tr, uk, zh, zh-hant
// https://stackoverflow.com/questions/2511076/which-iso-format-should-i-use-to-store-a-users-language-code
// Syntax
// starrotate:x,y,fill,scale=1,len=30,wid=4
// semicircle: path:blue,M33 160 a1 1 0 0 0 124 0,,10,yellow
// Probably NOT todo: recreate (only the detail) Detail flags in FlagMeister own Repo, easier to load full SVG from other Repo
// resources
// https://css-tricks.com/snippets/svg/svg-patterns/
// eurovision participants - https://en.wikipedia.org/wiki/List_of_countries_in_the_Eurovision_Song_Contest#2020s
// todo: Moldova, San Marino
// FlagMeister Helper functions creating SVG
//replaced for 2 usages: smaller GZ file
//let $nTimes = n => [...Array(~~n).keys()];// cast string n to integer because flag parser passes a string
if (!customElements.get("svg-flag")) {
let $stroke_W_Color = (width, color) =>
width ? ` stroke-width='${width}' stroke='${color}' ` : "";
let $p_path_Color_D__id_strokewidth_stroke_color_transform = (
color,
d_path,
id = "none",
strokewidth = false,
strokeColor,
transform = ""
) =>
`<path fill='${color}' id='${id}' d='${d_path}' ${$stroke_W_Color(
strokewidth,
strokeColor
)} transform='${transform}'/>`;
let $R_rect_X_Y_W_H___colorNone_strokewidth_stroke = (
x,
y,
w,
h,
color = "none",
strokewidth, //todo all usages for now are 2,BLACK
stroke = "#000",
attr = "" // rx="10" ry="10"
) =>
`<rect x='${x}' y='${y}' width='${w}' height='${h}' fill='${color}' ${$stroke_W_Color(
strokewidth,
stroke
)} ${attr}/>`;
//todo merge next 2 functions; check for #incolor/x
let $S_Color_X_Y_Scale___Rotate0 = (color, x, y, scale, rotate) =>
`<defs>${$p_path_Color_D__id_strokewidth_stroke_color_transform(
color,
"M12 7.7l3 9h9l-7.4 5.4 2.8 8.7-7.4-5.4-7.4 5.4 2.8-8.7-7.4-5.4h9.2z",
"s"
)}</defs>${x ? $U_use_X_Y___scale1_rot0(x, y, scale, rotate) : ""}`;
//todo savebytes, BUT REF all flags! put x y in outside <g> so rotate is no x,y mess
let $U_use_X_Y___scale1_rot0 = (
// use:
x,
y,
scale = 1,
rotate = 0,
id = "s"
) =>
`<use transform='rotate(${rotate}) scale(${scale})' href='#${id}' x='${x}' y='${y}'/>`;
let $T_triangle_X1_Y1_X2_Y2_X3_Y3_Color_strokewidth_stroke = (
x1,
y1,
x2,
y2,
x3,
y3,
color,
strokewidth,
stroke
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
color,
`M${x1} ${y1}L${x2} ${y2}L${x3} ${y3}`,
"tr",
strokewidth,
stroke
);
//https://stackoverflow.com/questions/34229483/why-is-my-svg-line-blurry-or-2px-in-height-when-i-specified-1px/34229584
let $S_stripe_Y_Size__color_length_x = (
y,
size = 30,
color = "#fff",
length = 640,
x = 640 - length
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
color,
`M${x} ${y}h${length}v${size}H${x}`
); //,"",crisp ? `shape-rendering='crispEdges'` :"");//todo test anti-aliasing of stripe/bar
let $H_bar_X_Size__color_height_y = (
x,
size,
color = "#fff",
height = 480,
y = 480 - height
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
color,
`M${x} ${y}h${size}v${height}h-${size}`
); //,"",crisp ? `shape-rendering='crispEdges'` :"");//todo remove crisp for better compression
// define globals for variables used in destructuring "color" value inside stripes: and bars:
// makes for smaller code and global values can be re-used by other flagparser functions
let previous_color,
repeat_color,
repeat_x,
repeat_y,
repeat_size,
repeat_width,
repeat_height;
let $F_stripes_arr = (
stripes_array,
width,
offset = 0, // y position
x,
repeat_height = 480 / stripes_array.length,
gap = 0
) =>
stripes_array.map(
(color, idx) => (
// first sets variables
([
repeat_color = previous_color,
repeat_x = x, // if no y1 specified
repeat_y = (repeat_height + gap) * idx + offset, // if no x1 specified in bars_array Value red>x1>y1
repeat_size = repeat_height,
repeat_width = width,
] = color.split(">")), //::
// last returns the value
$S_stripe_Y_Size__color_length_x(
repeat_y,
repeat_size, // + 2 old adjustment for overlapping stripes?
(previous_color = repeat_color || previous_color),
repeat_width,
repeat_x
)
)
).join``;
let $B_bars_arr = (
bars_array, // array of colord: red|green|blue OR red>x1>y1|green|blue>x1 >x1>y1 specifications overrule calculations
height, // when undefined defaults to Flag height 480 in $H_bar_X_Size__color_height_y
offset = 0, // origin , the map function calcs the x location
y, // when undefined defaults to 0 in $H_bar_X_Size__color_height_y
repeat_width = 640 / bars_array.length // auto calculate bar_width
) =>
bars_array.map(
(color, idx) => (
// first sets variables
([
repeat_color,
repeat_x = repeat_width * idx + offset, // if no x1 specified in bars_array Value red>x1>y1
repeat_y = y, // if no y1 specified
repeat_size = repeat_width,
repeat_height = height,
] = color.split(">")),
// last returns the value
$H_bar_X_Size__color_height_y(
repeat_x,
repeat_size,
(previous_color = repeat_color || previous_color),
repeat_height,
repeat_y
)
)
).join``;
let $GTransform_Content_X_Y_Rot_Scale_Id_SW_Stroke = (
content,
x = 0,
y = 0,
rot = 0,
scale = 1,
id = "none",
strokewidth,
stroke
) =>
`<g fill='none' id='${id}' transform='translate(${x} ${y}) rotate(${rot}) scale(${scale})' ${$stroke_W_Color(
strokewidth,
stroke
)}>${content}</g>`;
let $L_line_width_color_x1_y1_x2_y2 = (w, c, x1, y1, x2, y2 = y1) =>
`<line x1='${x1}' y1='${y1}' x2='${x2}' y2='${y2}' ${$stroke_W_Color(
w,
c
)}/>`;
let $X_cross_color_x_y_len__w_h = (
color,
x,
y,
len,
w = 20,
h = len,
hx = len / 2,
hy = h / 2
) =>
$L_line_width_color_x1_y1_x2_y2(w, color, x - hx, y, x + hx, y) +
$L_line_width_color_x1_y1_x2_y2(w, color, x, y - hy, x, y + hy);
let $T_text_str_size520_x320_y430_fill_width_stroke_font_weight_anchor = (
//Object keys are important here, match usage in textstring JSON object
{
str = "text",
size = 520,
x = 320,
y = 430,
fill = false,
width,
stroke,
font = "courier", //'Bookman Old Style'
weight = "bold",
anchor = "middle", // start,end,middle // Minify more: anchor never used hardcode middle
}
) =>
`<text x='${x}' y='${y}' font-size='${size}' ${
fill ? `fill='${fill}'` : ""
} ${$stroke_W_Color(
width,
stroke
)}font-family='${font}' font-weight='${weight}' text-anchor='${anchor}'>${str}</text>`;
let $C_circle__x320_y240_r80_fill_strokewidth_stroke = (
x = 320,
y = 240,
r = 80,
fill, // setting = "none"
strokewidth,
stroke
) =>
`<circle cx='${x}' cy='${y}' r='${r}' ${
fill ? `fill='${fill}'` : ""
} ${$stroke_W_Color(strokewidth, stroke)}/>`;
let commands = {
text: $T_text_str_size520_x320_y430_fill_width_stroke_font_weight_anchor,
// text parameter defaults:
// str='fm'
// ,size=520
// ,x=320
// ,y=430
// ,fill=""
// ,stroke=""
// ,font='Bookman Old Style'
// ,weight='bold'
// ,anchor='middle'// start,end,middle
circle: $C_circle__x320_y240_r80_fill_strokewidth_stroke,
//, circle: attrs => $C_circle__x320_y240_r80_fill_strokewidth_stroke
rect: $R_rect_X_Y_W_H___colorNone_strokewidth_stroke,
line: $L_line_width_color_x1_y1_x2_y2,
stripe: $S_stripe_Y_Size__color_length_x,
triangle: $T_triangle_X1_Y1_X2_Y2_X3_Y3_Color_strokewidth_stroke,
stripes: $F_stripes_arr,
bar: $H_bar_X_Size__color_height_y,
cross: $X_cross_color_x_y_len__w_h,
star: $S_Color_X_Y_Scale___Rotate0,
use: $U_use_X_Y___scale1_rot0,
path: $p_path_Color_D__id_strokewidth_stroke_color_transform,
// at what pixel WIDTH image will FlagMeister lazy load a more detailed SVG:
// include as SVG comment
detail: (x) => `<!--dtl:${x}dtl:-->`,
// Vertical bars
bars: $B_bars_arr,
rotate: (
times,
SVG_part,
center_x = 320,
center_y = 240,
partscale = 1,
id = "r",
startdegree = 0, //(=90 degrees) top=-90
max = times,
x,
y,
rotation = 0,
scale = 1
) =>
$GTransform_Content_X_Y_Rot_Scale_Id_SW_Stroke(
[...Array(~~times).keys()].map((n) =>
max > n
? $GTransform_Content_X_Y_Rot_Scale_Id_SW_Stroke(
SVG_part,
//flagparser(part.replace(/|/g, ','))
//todo proces as: flagparser(part)
//but part can NOT have commas in 'path:#fff,M100 0c10 10', so need to be escaped somehow
center_x,
center_y,
startdegree + (n * 360) / times, // rotate
partscale
//, id
//, strokewidth
//, stroke
)
: ""
).join``, //Content
x,
y,
rotation,
scale,
id
// , strokewidth
// , stroke
), // rotate:
circles: (times, x, y, gap, fill, strokewidth, stroke) =>
[...Array(~~times).keys()].map((n) =>
$C_circle__x320_y240_r80_fill_strokewidth_stroke(
x,
y,
gap + n * gap,
fill,
strokewidth,
stroke
)
).join``,
flag: (isoref, scale = 1, x = 0, y = 0) =>
`<g id='${isoref}' transform='translate(${x} ${y})'><g transform='scale(${
1 / scale
})'>${flagparser(flags[isoref])}</g></g>`,
// ! todo create patchwork flag
// , flags: (str, n = Math.sqrt(str.length), x = 0, y = 0) => {
// let fl = str.map((iso, idx) => commands.flag(
// iso,
// n,
// x++ * (640 / n),
// (x > n ? (x = 0, y++) : y) * (480 / n)
// )).join``;
// return fl;
// }
bgcolor: (color) => $S_stripe_Y_Size__color_length_x(0, 480, color), // ! todo fix anti alias with crispEdges
outline: (d) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
"none",
d,
"outline"
),
striangle: (colors_array, trianglecolor, x = 290, extra = "") =>
$F_stripes_arr(colors_array) +
extra +
$T_triangle_X1_Y1_X2_Y2_X3_Y3_Color_strokewidth_stroke(
-1,
0,
x,
240,
-1,
480,
trianglecolor
),
//full flag diagonal cross todo: add x1,y1 x2,y2 parameters, and bgcolor=""none
crossx: (bgcolor, color, size = 70) =>
flagparser(
`bgcolor:${bgcolor};pathstroke:M0 0L640 480h${size}v-480h-${size}L0 480,${bgcolor},${size},${color}`
),
doublecross: (x, y, c1, c2 = c1, w1 = 480 / 4.5, w2 = w1 / 2) =>
$X_cross_color_x_y_len__w_h(c1, 320 + x, 240 + y, 640, w1, 640, 640) +
$X_cross_color_x_y_len__w_h(c2, 320 + x, 240 + y, 640, w2, 480, 640),
diagonal: (trcolor, strokecolor, linefill) =>
$T_triangle_X1_Y1_X2_Y2_X3_Y3_Color_strokewidth_stroke(
0,
480,
640,
0,
640,
480,
trcolor
) +
$L_line_width_color_x1_y1_x2_y2(160, strokecolor, -60, 480, 700, 0) +
$L_line_width_color_x1_y1_x2_y2(120, linefill, -60, 480, 700, 0),
pathstroke: (
//D_Fill__width_col_transform
d,
fill,
w = 0,
col = "none",
transform
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
fill,
d,
"p", // id
w,
col,
transform
), //prf
shield: (
fill = "#fff",
h = 100, // default h,x for shields in gb flags
x = 390,
y = 225, // for 3x in Portugal
strokewidth,
stroke
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
fill,
`M${x} ${y}v${h}a1 1 0 0 0 ${h * 1.5} 0v-${h}z`,
"",
strokewidth,
stroke
),
scross: (color, x = 0, y = 0, scale = 1) =>
$GTransform_Content_X_Y_Rot_Scale_Id_SW_Stroke(
$S_Color_X_Y_Scale___Rotate0(color) +
[
[40, 70, 2],
[10, 110, 2],
[70, 100, 2],
[110, 275, 1],
[40, 160, 2],
].map((stars) => $U_use_X_Y___scale1_rot0(...stars)),
x,
y,
0,
scale
// , id
// , strokewidth
// , stroke
),
curve: (
// _cx_cy_dx_dy_x1_y1__strokewidth_stroke_fill_id_(x3)_(y3)
cx,
cy,
dx,
dy,
x1,
y1,
strokewidth = 1,
stroke = "#000", //todo test if other functions process undefined parameter as #000
fill = "none",
id,
x3 = x1 + dx / 2 + cx,
y3 = y1 + dy / 2 + cy
) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
fill,
`M${x1} ${y1}C${x3} ${y3} ${x3} ${y3} ${x1 + dx} ${y1 + dy}`,
id,
strokewidth,
stroke
),
// base version is spanish castle
castle: (x = 168, y = 255, scaleX = 1, scaleY = 1, rotate = 0) =>
flagparser(
`<g transform='translate(${x} ${y})'><g transform='scale(${scaleX} ${scaleY}) rotate(${rotate})'><defs><pattern patternUnits='userSpaceOnUse' patternTransform='scale(.2 .2)' id='castle' width='42' height='44'><g fill='none' fill-rule='evenodd'><g fill='#000'>;pathstroke:M0 0h42v44H0V0m1 1h40v20H1V1M0 23h20v20H0V23m22 0h20v20H22;</g></g></pattern></defs>;pathstroke:M0 0h2v-12h-2v-8h4v-4h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v4h4v-8h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v8h4v-4h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v4h4v8h-2 v12h3v8 h-31v-8,#f1bf00,.4,#000;pathstroke:M0 0h2v-12h-2v-8h4v-4h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v4h4v-8h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v8h4v-4h-2v-4 h2v2h1v-2h2v2h1v-2h2v4h-2v4h4v8h-2 v12h3v8 h-31v-8,url(#castle),.4,#000;</g></g>`
),
// more presets:
// + horizontal lines:
//line:1,#000,0,0,30,0;line:1,#000,0,-12,28,-12;
//, sun: (repeat, x = 320, y = 240, scale = 1) => { }
};
let stringIncludesSVGextension = (x) => x.includes(".svg");
// DISABLED in 2024
// all SVG commands can be called by fullname or abbreviated letter
// the minified file is patched in the built step to set these same letters
// can't use : to split because the : is in the key: (in JS source code)
// "detail a,bgcolor b,circle c,diagonal d,circles e,flag f,doublecross g,stripes h,outline i,line l,scross m,bar n,rotate o,path p,pathstroke q,rect r,star s,stripe t,use u,bars v,striangle w,crossx x,country y,triangle z"
// .split`,`
// .map(
// (def) => (
// ([commandname, letter] = def.split` `),
// console.log(commandname,letter),
// (commands[commandname] = commands[commandname] || commands[letter])
// )
// );
let flagparser = (fp_input, element) => {
//if (fp_input) {
let presets = {
// presets the flagparser can proces
// the output goes into the SVG string
// display text from given attributename in font-size at y position
// example: <img is=flag-nl alt='Netherlands' draw='attr:alt,80'>
attr: (attrname, size, y) =>
$T_text_str_size520_x320_y430_fill_width_stroke_font_weight_anchor({
str: element.getAttribute(attrname),
size,
y,
}),
// set the alt attribute to specified name
// example: country: "country:Andorra;detail:40;bars:#0018a8|#fedf00|#d0103a"
// the flagparser creates SVG so we return an empty string
country: (name) => (
element && element.setAttribute("alt", name), "" //return empty string
),
left: "0 0 480 480",
center: "80 0 480 480",
right: "160 0 480 480",
signal: () => (
(element.box = "0 0 480 480"),
//make 640:480 a square flag with scale(.75 1)
flagparser(
"<g transform='scale(.75 1)'>;" +
{
a: "bars:#fff|#00f",
b: "bgcolor:#f00",
c: "stripes:#00f|#fff|red|#fff|#00f",
d: "stripes:#ff0|#00f|#00f|#00f|#ff0",
e: "stripes:#00f|#f00",
j: "stripes:#00f|#fff|#00f",
f: "bgcolor:#fff;path:#f00,M320 0l320 240l-320 240l-320-240z",
g: "bars:#ff0|#00f|#ff0|#00f|#ff0|#00f",
h: "bars:#fff|#f00",
i: "bgcolor:#ff0;circle:320,240,140,#000",
k: "bars:#ff0|#00f",
l: "bgcolor:#000;path:#ff0,m0 240V0h320v480h320V240z",
m: "crossx:#00f,#fff",
// white/blue checker : white background, blue id='s'
n: "bgcolor:#fff;path:#00f,m0 0h160v120h-160z,s;use:320;use:160,120;use:480,120;use:0,240;use:320,240;use:160,360;use:480,360",
o: "bgcolor:#ff0;path:#f00,m0 0h640v480z",
p: "bgcolor:#00f;rect:140,120,340,240,#fff",
q: "bgcolor:#ff0",
r: "bgcolor:#f00;doublecross:0,0,#ff0",
s: "bgcolor:#fff;rect:140,120,340,240,#00f",
t: "bars:#f00|#fff|#00f",
u: "bgcolor:;path:#f00,m0 240V0h320v480h320V240z",
v: "crossx:#fff,#f00",
w: "bgcolor:#00f;pathstroke:m160 140h320v200h-320z,#f00,100,#fff",
x: "bgcolor:;doublecross:0,0,#00f",
y: "bgcolor:#ff0;path:#f00,m10 520l700-520,s,80,#f00;use:-110,-110;use:-220,-220;use:110,110;use:220,220",
z: "bgcolor:#000;triangle:320,240,0,0,640,0,#ff0;triangle:320,240,640,480,640,0,#00f;triangle:320,240,640,480,0,480,#f00",
0: "bgcolor:;cross:#00f,140,100,100;cross:#00f,500,100,100;cross:#00f,140,380,100;cross:#00f,500,380,100;cross:#00f,320,240,100",
1: "stripes:#f00|#ff0|#f00",
2: "stripes:#ff0|#f00|#ff0",
3: "stripes:#00f|#f00|#00f",
4: "crossx:#f00,#fff",
5: "crossx:#ff0,#00f",
6: "bgcolor:#fff;path:#00f,m0 480l640-480,s,100,#00f;use:-140,-140;use:140,140",
7: "bars:#f00|#fff|#f00",
8: "bars:#ff0|#00f|#ff0",
9: "bars:#00f|#fff|#00f",
}[element.getAttribute("char")] +
";</g>"
)
),
ics: () => (
//set value
//clip a square from the center of the flag
(element.clip = "outline:M0 0l640 160l0 160l-640 160z"),
//return value:
flagparser(
[
"bars:#ff0|#f00|#ff0",
"bgcolor:#fff;circle:200,240,120,#f00",
"bgcolor:#00f;circle:200,240,120,#fff",
"bars:#f00|#fff|#00f",
"bgcolor:#f00;doublecross:-120,0,#fff",
"bars:#ff0|#00f",
"stripes:#000|#fff",
"stripes:#ff0|#f00",
"bgcolor:#fff;doublecross:-120,0,#f00",
"stripes:#000|#ff0;rect:0,0,320,240,#fff;rect:0,240,320,240,#f00",
][element.getAttribute("char")]
)
),
// used in clip examples
// <img is=flag-gd clip="bigstar" box="center">
bigstar: (attrs) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
"#000",
// bigstar centers on left by default: 80
`m${
80 + ~~element.box.split` `[0]
} 466 146-452 146 452-384-280h476`,
attrs
), // center star depending on BOX location
// used in clip examples
// <img is=flag-gb clip="heart">
heart: (attrs) =>
$p_path_Color_D__id_strokewidth_stroke_color_transform(
"#000",
// heart centers on flag by default: 350
`m${
350 + ~~element.box.split` `[0]
} 31a122 122 0 0 0-111 69 122 122 0 0 0-233 52c0 128 233 297 233 297s233-169 233-297a122 122 0 0 0-122-122`,
attrs
),
//todo: still used??
overlay: "<use href='#overlay'/>",
border: (width, color) =>
`<use href='#outline' ${$stroke_W_Color(width, color)}/>`,
// ,outline:() => `
// <filter id='ff'>
// <!-- Start by grabbing the alpha channel of the text and dilating it-->
// <feMorphology operator='dilate' radius='8' in='SourceAlpha' result='thick'/>
// <!-- Next,grab the original text (SourceGraphic) and use it to cut out the inside of the dilated text -->
// <feComposite operator='out' in='thick' in2='SourceGraphic'></feComposite>
// </filter>`
//FILTER
light: ({
//bevel and shadows:
color1 = "#ddd",
color2 = "#333",
offset = 4,
blur = 4,
//spotlight:
x = 320,
y = 240,
z = 70,
spot = "transparent",
focus = 15,
}) =>
`<filter id='ff'><feGaussianBlur in='SourceAlpha' stdDeviation='${blur}' result='f'></feGaussianBlur><feOffset dy='${offset}' dx='${offset}'></feOffset><feComposite in2='f' operator='arithmetic' k2='-1' k3='1' result='a'></feComposite><feFlood flood-color='${color1}'></feFlood><feComposite in2='a' operator='in'></feComposite><feComposite in2='SourceGraphic' result='b' operator='over'></feComposite><feGaussianBlur in='b' stdDeviation='${blur}'></feGaussianBlur><feOffset dy='${
-2 * offset
}' dx='${
-2 * offset
}'></feOffset><feComposite in2='b' operator='arithmetic' k2='-1' k3='1' result='c'></feComposite><feFlood flood-color='${color2}'></feFlood><feComposite in2='c' operator='in'></feComposite><feComposite in2='b' operator='over' result='d'></feComposite><feSpecularLighting result='e' in='d' specularExponent='${focus}' lighting-color='${spot}'><fePointLight x='${x}' y='${y}' z='${z}'/></feSpecularLighting><feComposite in2='e' in='d' operator='arithmetic' k1='0' k2='1' k3='1' k4='0'/></filter>`,
//TEXT
//United Nations world
lun: () =>
flagparser(
`path:#fff,m360 357l-6 6c-13-14-29-30-45-30-9 0-16 8-24 12-11 7-26 12-39 6-7-2-14-6-19-12 11 7 25 8 37 3 12-6 25-13 40-13 21 0 42 15 56 28zm-93-28l-8-3c-15-6-17-21-25-32 10 7 19 16 28 25 7 6 15 9 24 10l-7 1c-15 4-33 10-49 4-11-4-29-18-27-22 13 8 48 22 64 17zm-32-13l-10-11c-8-12-6-29-12-42 6 7 11 14 15 22 6 13 7 28 20 38-13-4-29-4-40-12-13-8-24-21-27-36 10 20 35 32 54 41zm-64-80c11 19 17 29 36 50l-3-5c-3-6-4-13-3-20 1-9 4-17 3-27 8 17 5 37 10 55l4 12c-7-6-17-11-25-17s-15-14-19-24c-3-8-3-17-3-24zm4-44c2 22 9 40 16 59-2-17 3-30 11-42l4-11c1 7-1 15-2 22l-8 26v18c-7-13-18-21-22-32-3-10-4-20-3-30zm16-38c-4 6-3 56-2 56l1-4c2-12 12-20 21-28l4-7-5 17c-6 13-19 24-22 40-1-15-10-26-10-41 1-5 7-33 13-33zm22-20c-11 8-10 20-13 31 0 2-6 12-3 12 2-5 4-9 8-13 8-6 19-11 22-21-1 14-13 25-24 33-5 4-9 8-12 14v-11c-1-13-2-26 7-36zm28-14c-8 7-13 15-19 24-5 6-12 10-18 16 3-6 4-14 8-20 0-7 29-19 29-20,l;<use transform='translate(640,0) scale(-1,1)' href='#l'/>;path:#fff,M375 206c-2 0-1 5-5 4-3-1 0-3 1-5-1-3-6-2-6 0-4 3 1-3-4-3 1-3-4-2-5-4-4-2-5 3-6 3-2 0-2 3-3-2 2-2 4-1 0-3-2 3-4 4-4 1-3 3-6 0-7 0-4 1 1 4-1 5-3 1-5-3-7-2 2-3 2-7-1-3 0 1-3 4-5 1-2-2-8 1-3 2 3 1-1 3-2 1 0 3 3 4 4 5 3-1 7 2 6 4-4 3 0 0 1 1-1 1 2 3 0 5-4 3-2 1 1 2 2 1 0 5 2 7 0 3-1 6-4 5s-4 3-4 5c-3 4 1 4 3 5-1-2 1-9 1-4 1 1 2 4-1 5-3 0-2-2-4 1-1 1 0 4-4 3 2 3-1 5-3 3-1 2-1 4 1 5 2 3 4-2 6-3 2-2 5-1 7 1 2-1-1-1-2-3 3-1 5 3 7 3 3 2 1 0 0-1-2-3 2-2 1-6-3-2 4 1 2-2 2 1 8-2 5-3-3-2 1-2 2-1 4 1 2 3-1 2-4 1-1 3-3 4s-6 2-5 5c2 2 7-4 6 1 0 3-3 3-5 3-3 0-4 4-7 2-2 1-3-3-6-1-3-1-5 3-7 2-1-2-5 2-6 2l-4 5c-1 2-2 3 0 5s3 6 6 6 4 2 7 1c3 0 6-2 8 0 3 1 2 5 6 5l1 7 6 6c2 2 5 3 7 3 4-1 7-5 10-7 2-2 6-3 4-6 2-2 1-5 0-6 0-2 5-3 3-6s-8-4-4-8c4-3 1-10-1-11-1 5-5 7-10 5l-7-4h4c2 2 5 1 7 2 4 1 4-2 4-5 2-1 2-3 2-6s-5-4-4 0c-2 1-4 3-5 1 1-1 4-2 6-5 1-4 5-4 7-7 2 2 4 0 6-1 5 1 2-3 0-4l-5-7c-2-2 2-3 2-5 4-1-1-3 4-4 3 1 5-3 6-5l-1-1zm28 32c-1 0-3 0 0 0zm2 12c-1 2 3 1 0 0zm3-2c2 5 0-4 0 0zm1-1c0-4-1 4 0 0zm-5 4c2 1-1 3 0 0zm-98 29c-3 0 0 2 0 0zm28-132c-3 0 2 3 0 0zm-25 3c4 0 4 3 0 1 0-1-2-1 0-1zm11-1c5 0 1-4 0-3-2 1 0 2 0 3zm10-17c-2 1 4 1 6 1s6-4 2-3c-3-1-4 1-7 1l-1 1zm0 5c-2-2-1-5-3-5-3 0-7 4-2 3l5 1v1zm35 8c5-3 4 6 0 1v-1zm-11 3c-3 4 2 2 1 5l4 7c-1 2 0 6 2 6 5-3 6 2 5 5 0 2 4 7 5 4 3 0 2 5 6 5l6 4c1 3 3 2 3 5 3 1 5-3 7-5 0-3-3-5-4-8l-5-5c0-4-4-2-5-6-3-1 0-3-1-6-3 2-1-3-5-3 1-3-2-3-3-5l-6-3c-2-2-4-2-5 0h-5zm-18-1c2 4 5 0 1-1l-1 1zm11 15c0-3-5-3-5-6-2-2-3-1-1 2l6 4zm1 3c-2-4 6-2 4 0-2 0-6 5-4 0zm16 13c3-3-3-4-2-7 2 0-3-6-5-5-2-1-4-7-6-5 3 0 2 4 3 5 2 1 2 5 3 7s2 5 5 6l2-1zm-23 13c2 1 3 4 6 3 3 0 7 2 4-2-3-1-6 1-8-2l-2 1zm-5 1c0 2 5 4 4 0h-4zm-1 1c-2 0-3 0 0 0zm18 0c-1-3 3 1 0 0zm3 2c-2-1 1-2 0 0zm8-10c-1-3 3 1 0 0zm3-10c0 1 0 1 0 0zm0 14c0 1 0 1 0 0zm-2-8c0 4 6 3 3-1-1-4-5 0-3 1zm4 6c2-3 7 0 4 1 0 3-4 1-4-1zm-13 8c5-2-1 3 0 0zm7-1c-5 1 0-2-1-4-1-1 1-6 3-4 1 3-3 4-2 6 7 2 0 0 0 2zm11-11l-3-3c-1-3 7 4 3 3zm-1 1c3 1 2 4 4 5 2-2-2-5-4-5zm7 16l-3-7c0-3 2-3 2 0 2 2 1 9 1 7zm1 6c0-1 0-1 0 0zm-2-5c-4 1-2 4-3 7 0 1-1 6 2 4l2-7-1-4zm-4-10c-2 0-7-3-6 1-3 2 4 1 4 5s5 3 5 2c-2 0 0-4-2-5-3 1 2-2-1-3zm-6 25c5 0 2-1 1-1l-1 1zm5-2c-1 3 3-1 0 0zm-2 14c0-4 5 1 0 0zm-11 19c3 0-1 4 0 0zm7 23c1 2 3 3 6 2 0-3 1-7-2-9s-1 4-3 5l-1 2zm-29-21c2-1 1-4 0 0zm-14 1v1m3 1c3-3-3 0 0 0zm-6-26c4-4-2-3 0 0zm-5 7c-2 3-6-3-2 0h2zm-2-13c1-5-3-2-4 1-1 2 0 4-3 4 0 2-4 6-1 7 2-1 4-3 7-2 2-1 3-2 3-5 2-1 3-4-1-4l-1-1zm-3-6c-1-1-1 3-4 4 0 4-3 2-4 5 2 4 3 0 5-2 3-1 1-4 4-5 0 0 1-3-1-2zm5-12c-2 0 1-6-4-4 0-5-1 1-3 1 0 3-4 3-6 3-4 0-7 0-10-2-4-4-7 1-11 0-1 3-6 2-1 2-1 3-3 3-6 3-2 1-2 5-4 6 0 3-1 5-3 7l-2 6c-3 2 4 3 0 4-1 1-7-6-9 0-2 2-4 3-4 6s1 6-3 7c-1 3-5-1-7 0-3 1-3-2-7-1-2 6 0-1-3 0-4-1-4 2-4 4l1 7c0 3 4 6 3 1 0-3 6 2 6 1l6 5c1 3 4 4 6 5 2 3 5 2 7 4 3 2 6-1 9 3 2 3 5 2 8 2 2-2 6-1 9-3-2-3 0-7-3-8-2-3-8-5-5-8-2-3-3-7-3-10 3-3-3-4-2-8 0-3-4-5-3-8-3-3 2-4 3-4-2-5 4-3 4-6-3-1-2-8 2-5 5 0 1 6 2 9-1 3-3 6 0 6 1-5 4-1 7-1 4 0 2 4 6 3-1 2 3 4 3 1 0 2 2 8 2 2 2-1 5-5 5-8 2 0-2-4-3-4s-3 4-4 1l5-4c3-1 1 7 4 2 2 2 2-3 4-3-1-2 5-5 0-5 0 2 1-4 3-3 3-1 6-2 5-6zm-75 64c-2-1-4-7-1-4-2 2 4 4 1 4zm-7-9c-3 0 2 4 1 1l-1-1zm78-61c-1-3 3 1 0 0zm2-1c-3 1 1-3 0 0zm0-1c0-1 0-1 0 0zm1-1c1 0 1 0 0 0`
),
// detail world wun
//+ `<path fill='white' d='M326 196h-1v1h1zm-2-1h1v1h-1zm-1 0l1-1h-1zm-1 0h-1v-1h1zm-6-1h1-1zm-1 1v-1zm0 1h-1v-1h1zm-2 1v-1h1v1zm-78 61h-1v1h1v1h1v-1zm7 9l-1-1-1-1v-1l-1-2 2 1v2h1l1 2zm21 27l-1-2 1 1 1 1 1 1h-1zm54-91h-1v-4h-3v-2h-1v1l-1 1v1h-1v1l-3 2h-6-1-2l-2-1-3-2c-2-2-5 0-5 1h-2-3l-1 1-1 1h-2 3l-1 2h-1v1h-4l-1 1-1 2-1 1v2h-1v3l-1 1v1l-2 2v2l-1 1v2h-1v1l-1 2h2v2c-1 0-2 0-1 1l-2-1-1-1c-1 1-1-1-1-1-1-1-5 1-5 1v1l-2 2-1 2h-1v7l-1 1-2 1v1h-3l-1-1h-6v-1h-4l-1 3-1-2a13 13 0 0 1 1-1h-5v2h-1v3l1 2-1 1 1 1v2l1 1v2l1 1h1v-3c-1-1 1-2 1-1l2 1 2 1c1-2 1-1 1 0l2 2h2v2c2-1 2 0 3 2a4 4 0 0 0 3 3h1l1 1 3 3h3l2 2h3c0-2 3 0 3 1l2 1 1 1 1 1h6l2-1 5-1c3 0 1-3 1-3v-4l-7-7c-2 0-1-2-1-2 2-1 0-2 0-2l-1-3-1-3v-2c-1-1 1-2 1-2 1-1-1-2-1-2v-1h-1l-1-5-3-5v-2l-1-1v-2l2-1h2v-3l2-1h1l1-1v-1h-1l-1-4c2-3 4-1 4-1h2c2 1 0 4 0 4v6l-1 1v2c1 0 1 2-1 1l1 1c1 1 1-1 1-1l2-2 3 2h4l1 3c1-2 4 0 2 1l2 1 1 1v-1c-1-1 2-2 1 0v1l1 1v2c2 0 1-3 1-3h2c-1-4 2-4 2-4l1-3c-1-1 0-2 1-1l-1-2-1-1h-1v-1h-2v1h-1v1h-2v-1h1v-1l1-2h3c0-2 1-1 1-1l1 1v3h1c0-2 2-2 3-1v-1c-1-1 0-2 1-2l1-1s1 1 0 0v-2l2-1v-2h-2c0 2-1 0 0 0l1-1v-2h2l1-1h2l2-2v-3M312 215l-1-1v3h-1l-2 2v1l-1 1v1h-2l-1 2 1 2h1l1-1v-1l1-1 1-1 1-1h1v-3h1l1-1v-2h-1zm3 6v-2l-1-1-1 1-1 1v1l-1 1v2h-1v2h-2v1l-1 1v1l-1 3 2 1 1-1v-1h5l1-1h1v-1h1v-2l1-2h1l-1-1 1-1-1-1h-3zm2 13l-2 1h-1l-1-1v-1h1l1 1h2zm5-7l1-1v-2l-2 2 1 1zm5-5l2 3v1a15 15 0 0 1-2-3v-1h1zm1 31l1-1h-1l-1 1zm-3-2v1m14-2l1-1v-1l-1 1zm29 21h1v2h5v-7l-3-3-1 1v3l-1 1-1 3zm-2-4l-1 1c-1-1 0 0 0 0h1l1-1h-1zm-5-19h1v2h-1zm11-19c-1-1 2-2 2-1v1h-2zm2-14v1h1v-1zm-5 2h3v-1h-1l-1 1v-1zm6-25h-1l-1-1h-4v2h-1v1h1v1c1-1 3 0 3 1s3 2 2 4l1 1h2v-1l1 1v-1h-1v-4h-1v-1h-1l1-2-1-1zm4 10l-2 1-1 2 1 1-1 5c-1 1 0 0 0 0v3h1l1-1 1-3v-2l1-1v-2-2l-1-1zm2 5v-1zm0 2h-1v-1l1 1zm-1-8l-1-1v-1-1l-1-1v-1l-1-2v-1l1-1v-1l1 1v2l1 2v6-1zm-7-16l1 1 1 1h1v3h1l1-1-1-1-1-2h-1l-1-1h-1zm1-1l-1-1h-1a1 1 0 0 1 0-1l-1-1 1-1 1 1 1 1 1 1v1h-1zm-11 11h-3l1-1 1-2s-1 0 0 0l-1-2h1l1-3h2v3h-1v1l-1 1v1h2l1 1c1 0 0 0 0 0h-3v1zm-7 1h2l-1 1h-1v-1zm13-8l2-1 1-1 1 1 1 1v1h-1v1h-3v-1l-1-1zm-4-6c1 0 0 3 2 2l1 1 1-1v-2l-1-1-1-1-1-1-1 1-1 2h1zm3 9v-1l1 1h-1zm-1-1v1zm0-14v1zm-1 10zm-2 0v-1h1v1zm-8 10l-1-1h1zm-3-2v-1h1v1zm-18 0h-2 2zm-3 0h-1l1-1v1zm-1 1v-1l1 1zm5-2v1h1l1 1h2v-2h-1-3zm5-1l1 1h1l1 2a5 5 0 0 0 2 0h4l2 1v-2l-2-2-2 1c-1 1-3 0-3-1l-1-1h-1l-1 1h-1zm23-13l1-2-1-1-2-2v-2h1l-4-5c-1 1-3 0-3-1l-3-4h-2v1h2l1 2-1 1 1 1h1v2l1 1v3l1 1 1 1v1l2 2 1 1 2 1 1-1M348 166v-2h3l1 1v1h-2l-1 2h-2l1-2zm-1-3v-1l-1-1-1-1-2-1-1-1v-1h-1v-1h-2l1 1 1 2 1 1h2v1l3 2zm-11-10v-1l-1-1v2zm0-5l1 1 1 1h1v-2h-1l-1-1-1 1zm18 1l-1 2v1h2v2l2 2v3l2 1-1 3 1 1 1 3h1l3-1c2 0 3 3 3 4h-1v3l3 4h2c0-2 1-1 2-1v3l1 1h2l1 1 1 1h2l1 1 1 2h1l1 2h1v1h1v2h2l1-1a6 6 0 0 0 2-2l2-2v-2s-2-1-1-2l-2-2-1-1-1-2-1-1v-1h-1l-3-3v-2h-2l-2-3-1-1h-1l1-2v-3l-2 1v-3h-2l-1-1v-2l-1-1h-1v-1l-1-1v-1h-2l-1-1-1-1h-2l-1-1h-1l-1-1v1h-2v1h-5zm11-3l2-1s2 1 2 4l-2-1h-1l-1-2zm-30 2v-2l1 1zm-5-10l-1-2v-1h-1v-2h-3l-1 1-1 1-1 1h3v1h3l1 1c2 1 2 0 1-1zm0-5c0-1-2 1 0 1h8v-1l2-1v-1h-4-2v1h-3l-1 1zm-10 17l2-1h1l-1-1-1-1-1-1-1 2 1 2zm-11 1h2l1 1v1l-1-1h-2l-1-1zm34-22l-1 1-1-1v1l1 1v-1h1zm-6-2h-1l1 1 1-1zm-3 21h-1v1l1 1 1-1-1-1zm-33 28v1h1c1 0 0 0 0 0l-1-1zm2 0h1l-1 1zm-19-19h1v1zm30 131l-1-1-1 1h1v1l1-1zm-8-8h-1l-1 1h2-1zm74-19l-1-1v2l1-1zm1-2h-1v-1l1 1zm23-8l1 1-1 1v-2zm5-4a2 2 0 0 0 0-1l-1 1 1 1v-1zm-1 1v1h1a12 12 0 0 1-1-2v1zm-3 2v1h1l-1-1zm-2-12a1 1 0 0 0-1 0h-1 2zm-28-32h-1v1l-1 1v1l-1 1h-3v-1-2h1l1-2-1-1-1-1h-2l-1 1h-1v1c0 1-3 2-2 0l1-1v-1h-2l-1-1v-1l-2-2h-3v-1h-2c-1-1-3 0-3 1v3l-1-1h-1v1l-1 1v-1c0-1-2-3 0-3v-1l1-1h1-2l-1-1a4 4 0 0 0-2 3c-1 1-3-1-2-2l-3 1h-2l-1-1v-1l-1 1-1 1-1 1 1 1v1h1l-2 1h-2l-2-2h-2l1-2 1-3-2 1-1 1s-1 0 0 0l-1 1v1h-3l-1-1-2-1-1 1h-2v1l3 1v2h-2v-1h-1v2l1 1h1l1 2h4l3 3v1l-1 1h-1v1h1l1-2 2 1-1 1v1h1v2l-1 1-1 1-1 1h-1 4v1h1v4l1 1v4l-1 1v1h-5l-1 1-1 1v3l-1 1v3h2l1 1h1v-5l1-1v3h1v1 2h-1l-1 1h-2v-1h-1v2l-2 1c2 0 0 1 0 1 1 1 0 2-3 1v2h1v1c0 2-4 1-4 0v2h-1l1 2v1h1v1h2l4-4 2-1h2l1 1h1l1 1c0 1 0 0 0 0v-1h1-1l-1-1h-1c-1-2 0-1 1-1h1l2 2 1 1h2v1h2v-1h-2v-1h-1c0-2 0-3 1-2v-1h1v-3h-1v-1l3 1v-2h3l3-2v-1h-2v-2h2v1h2l1 1 1 1h-2-1-1l-3 2h1v2h-1l-1 1h-2v1c-2 0-2 1-2 2v1l1 1 2-1 2-1c0-1 2 1 1 2v2h-2v1h-4l-1 1h-1l-1 2-3-1h-2v-1l-2-1-4 1h-1l-1 1-2 1h-1v-1h-1l-1 1-4 2v1l-1 1-1 1h-1v2h-1v1l-1 1h-1l1 2h1l1 2 1 1 1 2 1 1 1 1h4v1h6l4-1 2 1 2 1 1 3h1l2 1v1h1v6l1 1 1 2h1l4 4 3 1 1 1h3l2-1 1-1 11-9-1-1v-2c2-1 2-4 0-4-1 0-1-1 1-1v-2l3-2v-1l-5-5c-3 0 0-5 1-5 2 0 0-8 0-8h-1v-2h-1l-1 2-1 2c0 2-6 1-7 1l-2-1-2-1h-2l-1-1-2-1h2l-1-1 3 1h1l1 1h4l1 1h4v-1l1-1v-3h1v-2h1v-5l-2-2-2 1v1 1l-1 1h-2v1h-2v-2h2l1-1 1-1 1-1 2-2c0-1 1-4 3-4h2l1-2h1v1h2l1-1 3-1h2v-1l-2-2-2-1-1-3-1-1-2-3a2 2 0 0 1 0-2l2-2v-1l2-1v-1h-1l2-2h4l1-2 1-1 1-1s0-3-1-2'/>`
leaves: (fill, stroke = fill, strokewidth = 0.2) =>
flagparser(
`<g id='v'>;rotate:72,<path fill='${fill}' ${$stroke_W_Color(
strokewidth,
stroke
)} d='m90 0c-3 0-5-6-5-9 1 4 5 5 5 9zm0 0c3 0 5-6 5-9-1 4-5 5-5 9z'/>,320,240,1,l,-33,26;use:-640,0,-1 1,0,l;</g>;`
),
crown: (
nr = 1,
x = [0, -80][nr],
y = [0, -184][nr],
scale = [1, 1.6][nr],
pearlSize = [1.3, 2][nr], //1.3=ES-Spain 2.3=RS-Serbia,
rubyColor = ["#aa151b", "blue"][nr],
basePearls = ["use:28,20;use:42,19;", ""][nr],
innerLiningColor = ["#aa151b", "transparent"][nr],
crownRimBaseGold = ["", "m-40 12 v10h41v-14"][nr]
) =>
flagparser(
`<g id='c' transform='translate(${x} ${y}) scale(${scale})'>;` +
// <!-- innerLiningColor (red=spain) in crown -->
`pathstroke:M206 175l16 2a32 32 0 0 0 15 2l10 2a27 27 0 0 1 7 5l-2 1v4l-4 5-2 2-5 4h-3l-1 2-32-4-32 4-1-2h-2l-5-4-2-2-4-4-1-4-1-2a28 28 0 0 1 7-4 26 26 0 0 1 10-3h7a30 30 0 0 0 8-2l15-2M177 213 c30 5 30 5 60 0c-30 -5 -30 -5 -60 0,${innerLiningColor},.3,#000;` +
// white pearlDefinition for <use href="#s"
`<circle id='s' cx='155' cy='186' r='${pearlSize}' fill='#fff'/>;` +
// <!-- left arches -->
`<g id='a' stroke='#000' stroke-width='.4'>;` +
// <!-- Gold curved rim -->//todo move into arches below
`pathstroke:M206 192s1 9-6 8l-4-2c-2 4-8 4-11 1-1 2-4 3-6 3l-3-1-3 3-4-1-6-6s7 6 10 5c2-1 2-5 2-5s2 4 4 4c3 0 5-9 5-9 0 3 4 7 6 7 3 0 5-6 5-6s3 5 5 5c3 0 6-3 5-6 ${crownRimBaseGold},#f1bf00,.4,#000;` +
// <!-- golden arches and flowers --> <!-- arches -->
`path:#f1bf00,M183 184l2 3v-1h1v4l-1 1-4-1-1-3h2l1-3m-2 8l-3-1v1l-3 2 4 1v1h1l2-1m4-2l-1-2 2-1 3-1v1l3 1-3 2 1 1h-3l-2-1m20-12v8h-2v-1l-2-4 2 1 2-4m-1 11l-1-1v-2l-5-2v1l1 1-4 2 4 1-1 1v1h1l5-2m-39 6l-1-1h-2l-2-3h-4c0-2 1-3 3-3l3 1v-1l2 2v2l3-2 1 1 4 1-3 2h1l1 1h-6M182 184c2 2 4-3 1-3-2-3-3-8 0-10 4-4 10-4 15-2 1 1 5 0 3-1-2-2-4-1-6-2-5 0-10 1-14 4-3 3-3 9 0 12v3m1-1c-4-2-5-9-2-12 0-1 3-3 2-1-3 3-2 9 1 12l-1 2m-22 2c-4-4-2-11 3-14 4-3 10-3 16-3 1-1 2 2 0 1-5 0-10 0-15 3-2 1-4 4-4 7s4 4 2 7c0 1-4 3-3 0l2-2m2-13c-4 2-7 8-4 12 2 2-1 6-2 3-2-4-1-11 4-13l1-1;` +
// <!-- red circles in flower -->
`circle:183,192,2,${rubyColor};circle:163,197,2,${rubyColor};` +
// <!-- diamond red jewel -->
`path:${rubyColor},M174 209l2-2 3.3.4-3 2-2-1;` +
// <!-- green jewels -->
`path:#058e6e,M187 207l2-2 3.3.4-3 2-2-1;` +
// <!-- red jewels -->
`circle:206,205,3,${rubyColor};` +
// <!-- white pearls circle #s -->
`use:1,4;use:0,-4;use:1,-8;use:3,-12;use:6,-15;use:10,-17;use:14,-18;use:19,-18;use:23,-18;` + //outer rim
`use:26,-2;use:24,-6;use:23,-10;use:24,-14;use:28,-20;use:32,-22;use:37,-22;use:42,-22;use:20,10;use:40,8;` + //inner rim
basePearls + //center
// <!-- end crown jewels -->
// <!-- blue circle --> <!-- yellow cross -->
`circle:206,161,5,#005bbf;path:#f1bf00,M205 151v2h-2v2h2v4h-4v2h10v-2h-4v-4h2v-2h-2v-2z;` +
// <!-- gold center arch -->
`pathstroke:m209.5 166 1.5 13 -5 5 -5-5 1.5-13,#f1bf00,.4,#000;` +
// <!-- center white jewels -->
`use:-17.5,-70,1.5;` +
`</g>` + // end left crown
// <!-- right arches -->
`<use transform='scale(-1 1)' href='#a' x='-412'/>` +
`</g>;` //<!-- end big crown -->
),
gb: (bgcolor = "#00247d", scale = 2) =>
flagparser(
`bgcolor:${bgcolor};<defs><clipPath id='c'>;rect:0,0,640,480;</clipPath></defs><g transform='scale(${
1 / scale
})' clip-path='url(#c)'>;rect:0,0,640,480,#00247d;pathstroke:M0 0l640 480m-640 0l640 -480,,90,#fff;pathstroke:M-20-5L320 255M660-30L320 230M660 485L320 235M-20 510L320 250,,40,#cf142b;doublecross:0,0,#fff,#cf142b,99,60;</g>`
),
// repeat pattern for all 52 stars,so GZip will encode great! ONLY TAKES 9 BYTES!!!
// how:make path relative (no capitals in path)
us: (scale = 0.85) =>
flagparser(
`stripes:#b22234|#fff|#b22234|#fff|#b22234|#fff|#b22234|#fff|#b22234|#fff|#b22234|#fff|#b22234;rect:0,0,${
360 * scale
},257,#3c3b6e;<g transform='scale(${scale} 1)'>;` +
// all stars
"path:#fff," +
"m30 11 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m-275 26 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11z" +
"m61 0 3 10h11l-9 7 3 10-9-6-9 6 3-10-9-7h11" +
";</g>"
),
}; //presets
return (
fp_input &&
fp_input.split`;`.map((fmCommand) => {
fmCommand = fmCommand.trim();
let presetkey = fmCommand.split`:`[0];
let preset = presets[presetkey] || commands[presetkey];
if (preset) {
let args = fmCommand.split`:`[1];
if (args)
args = fmCommand.includes(':{"')
? JSON.parse(fmCommand.substr(presetkey.length + 1))
: args.split`,`;
else args = presetkey == "text" || presetkey == "light" ? {} : [];
if (typeof preset == "function")
return Array.isArray(args)
? preset.call(
element,
...args.map((s) =>
s == "0"
? 0
: Number(s) ||
(s.includes("|")
? s.split`|` // split array values
: s)
)
) // flagparser array param??
: preset.call(element, args);
// pass remaining string as parameters
else return preset;
} else return fmCommand;
}).join``
);
// }//if (fp_input)
}; //flagparser
let flags = {
ad: "country:Andorra;detail:40;bars:#0018a8|#fedf00|#d0103a", //end cty
ae: "country:Arabic Emirates;stripes:#00732f|#fff|#000;bar:0,220,#f00", //end cty
//todo extra detail in <100 img
af:
"country:Afghanistan;detail:80;bars:#000|#d32011|#007a36;" +
"leaves:#fff,#bd6b00;" +
"use:47,35,.87,0,v;" + //x,y,scale,rotate,id
//todo
//fun rotate 3 partly cricles
//+ "rotate:3,<use href='#v' transform='translate(-300 -220)'/>,320,240,.6;"
"<g id='lf'>;" +
// 3 banners in leaves and flag on templepillar
"path:#fff,M220 245l-1 2c0 1 2 9 6 11 3 2 17 5 24 7 3 1 6 2 9 5l-3-10c-2-3-5-6-8-6-6 0-14-1-20-3l-7-6zm11-21v-2h6l1-3c0-1 0-4 1-3l5 8c3 4 5 9 6 13 1 5-1 10-4 13 1-3-1-7-3-10a112 112 0 00-12-16zm4 68h-1c6 7 7 9 15 8 9-1 11-3 17-6 3-2 7-3 11-1 1 0 2 0 1-1l-4-4c-3-2-8-3-12-2-6 0-12 4-18 6h-9zm32-64c-1-2-2 2-7 6-3 1-4 6-4 9v5c-1 1-2 4-1 5l6 6c2 1 3-5 3-8 1-3 1-6 4-9l6-5-7-9z;" +
// red cover making 3 stripes in flag
//+ "path:#d32011,M267 244l-5-5c-2-1-2-3-3-5h-1c-2 2-3 5-3 7v4l3 1c2 0 4 1 5 3l2 3 4 1-2-2v-7z;"
//!experiment drawing
"line:10,blue,260,240,270,250;" +
// + "bar:160,10,hotpink,20,10;" // $H_bar_X_Size__color_height_y
// //::
// + "bars:red>5>20>5>20|green|blue,50,10,10,25;" // bars,x,y,width,height
// + "stripes:#fff|||,9,180,280,20,5;" // stripes,width,offset,x,height,gap
"</g>;" +
"use:-640,0,-1 1,0,lf;" +
// Arabic text at top - 750 GZb
//+ "path:#fff,M374 172c1-4 4 0 1 2-3 4-4 10-10 11-1 1-4 0-4-1-1 0 0-2 1-1h5c3-3 6-7 7-11zm-10 9l7-13c1-1 2 2 1 3-2 1-6 8-7 11l-1-1zm-54-24c-1-2 1-3 1-2l7 14c1 2 0 2-1 1l-3-4c-2 0-4 5-10 4l-1-7s1-1 1 1c0 1 0 5 2 5s6-3 7-5l-3-7zm53 8l1-2c3 3 4 12 5 18l-1 1c0-3-2-14-5-17zm-78-3c1-1 3-3 2-4l-1-1v2l-1 2v1zm-5 0c-1-1 1-3 2-1 0 2 5 8 6 10s0 3-1 1l-7-10zm-3 0l-1 2 1 1 1-2-1-1zm-5 10l-1 1 3-1c-1-1 3 0 2-2l-2-2-1 1 2 1h-2v2h-1zm-1-4s0 2 1 1l-1-1zm-5 8l1 1c1 0 3-2 2-3 0-1-2-2-3-1s2 1 2 2l-2 1zm4 9v1h3v-6l4 3c2 1 2-4 5-4 2 0 2-2 2-4l-4-4c-2-1-2 1-1 1l3 4-2 2-4-5v2l3 3-2 4-4-4h-2l1 6-2 1zm-3-5l1 2 1-2h-2zm28-24l2 2h-2v-2zm-5 11l1 1c3-2 7-4 8-8l2-3c1-1 3 2 4 0l3-1v-3h-1v2h-1v-1h-1c-1 1-1 3-2 1-1-1-2-3-2 0l-3 2c-1 0-1-3-3-2l-1 3c0 2 4 1 4 2l-8 7zm67 6v1h4v-1h-4zm2-5l-1 1 2 1c1-1-1-1-1-2zm-9 7s-1-2-1 1 5 2 7 1c1-1 0 4 2 5l4-3c3-3 4-8 7-12 1-1-1-2-1-1-2 4-5 12-8 14-3 1-2-2-2-4 0 0-1-2-3 0l-3 1c-1 0-2 0-2-2zm8-14a612 612 0 01-5 12l5-12zm-9-3v1h3v-1h-3zm-1 3l-1 1 1 1 3-1-2-1h-1zm-6 13c-1-1-1 1 1 1 3 1 7 0 8-4l2-8c1-2 2-1 1-4h-1l-4 11c-1 3-3 4-7 4zm-3-17c-2-1 0-4 1-3l4 7 1-5c1-1 2-1 2 1l-2 6c1 3 3 5 3 8h-1l-2-6-2 8c0 1-2 1-1-1l2-9-5-6zm-17 8l1 4 5-6h1v7l3-1 1-7h1v7c0 1 3 3 3 0v-6c-1-1 1-1 2 1v4c0 3-2 4-3 4l-3-1-3 1c-4 0-2-5-3-5l-4 5c-2 0-3-4-3-6 1-2 2-2 2-1zm9-7l2 1 3-1-1-2-1 2h-1c-1 1-1 0-1-1l-1 1zm2-5v0zm-6 2l1-2 1 1-1 2-1-1zm-5 0l-2-1c0-1 2-2 3-1 1 2 0 4-2 4s-5 3-5 3l9 1c1 0 1 1-1 1l-5 1-3 4-1-1 3-4h-3v-2l4-4 3-1zm-16 6c-1-1 1-2 2-1 3 2-4 10-7 13-1 1-2-1-1-1l7-8c0-1 1-2-1-3zm8-5v1h2c0-1 0-3-1-2l-1 1zm3-3l3-3h1l-3 3h-1zm-4 0l3-2v1l-2 2-1-1zm-12 10h-1l3-4 1 1-3 3zm-2 3l1 2c-1 0-2-1-1-2zm-9-9c-1-1 2-2 1 0 0 3 5 9 5 12s-1 5-3 6c-2 2-5 2-7 1l-1-4c0-1 2 3 4 3 3 0 6-2 6-4 0-4-5-10-5-14;"
// Arabic text at top - 480 GZb
"path:#fff,M374 172l1 2-10 11-4-1 1-1h5l7-11zm-10 9l7-13 1 3-7 11-1-1zm-54-24l1-2 7 14-1 1-3-4-10 4-1-7 1 1 2 5 7-5-3-7zm53 8l1-2 5 18-1 1-5-17zm-78-3l2-4-1-1v2l-1 2v1zm-5 0l2-1 6 10-1 1-7-10zm-3 0l-1 2 1 1 1-2-1-1zm-5 10l-1 1 3-1 2-2-2-2-1 1 2 1h-2v2h-1zm-1-4l1 1zm-5 8l1 1 2-3-3-1 2 2zm4 9v1h3v-6l4 3 5-4 2-4-4-4-1 1 3 4-2 2-4-5v2l3 3-2 4-4-4h-2l1 6-2 1zm-3-5l1 2 1-2h-2zm28-24l2 2h-2v-2zm-5 11l1 1 8-8 2-3h4l3-1v-3h-1v2h-1v-1h-1l-2 1h-2l-3 2-3-2-1 3 4 2-8 7zm67 6v1h4v-1h-4zm2-5l-1 1 2 1-1-2zm-9 7l-1 1 7 1 2 5 4-3 7-12-1-1-8 14-2-4h-3l-3 1-2-2zm8-14h2l-7 12 5-12zm-9-3v1h3v-1h-3zm-1 3l-1 1 1 1 3-1-2-1h-1zm-6 13l1 1 8-4 2-8 1-4h-1l-4 11-7 4zm-3-17l1-3 4 7 1-5 2 1-2 6 3 8h-1l-2-6-2 8-1-1 2-9-5-6zm-17 8l1 4 5-6h1v7l3-1 1-7h1v7h3v-6l2 1v4l-3 4-3-1-3 1-3-5-4 5-3-6 2-1zm9-7l2 1 3-1-1-2-1 2h-1l-1-1-1 1zm2-5v2zm-6 2l1-2 1 1-1 2-1-1zm-5 0l-2-1 3-1-2 4-5 3 9 1-1 1-5 1-3 4-1-1 3-4h-3v-2l4-4 3-1zm-16 6l2-1-7 13-1-1 7-8-1-3zm8-5v1h2l-1-2-1 1zm3-3l3-3h1l-3 3h-1zm-4 0l3-2v1l-2 2-1-1zm-12 10h-1l3-4 1 1-3 3zm-2 3l1 2zm-9-9h1l5 12-3 6-7 1-1-4 4 3 6-4-5-14z;" +
// Arabic subtext
"pathstroke:M375 160c-2 0 0 3 1 1l-1-1zm5 2h2c-1 1-2 2-1 4h-1v-4zm-9 3c-2 0-1 3 0 2s1 1 2 1l4-1c1 0 2-2 0-3 0 1 0 3-1 2l-1-1h-4zm-6-5l-4 5-2 2h-2-2l3-2 2-1 4-4h1zm1 2c-1 1-2 3-1 4s-2 2-1 0v-3l2-1z;" +
//"M386 165v0zm5 2s1-2 2 0c0 1-2 1-2 3v2-5zm-8 5c1 1 5 0 6-1l-1-2c-2 4-1 0-2 0-1 5-2-1-4 1-3 5 1 0 1 2zm-7-7c-3 1-4 6-6 7-1 0-1-2-2-1 0 1-1 2-2 1s2-1 2-2h2l1-2 4-4c1-1 2 1 1 1zm1 2c-2 1-1 7-2 5v-5h2;"
// bottom shield for arabic text
"path:#fff,M350 330v3c-2-1-20 3-15-1 3-2 10-1 15-2zm-58 0v3c2-2 19 4 16 0-1-1-3-3-5-3h-11zm4-21c-1-1-3 0-4 1l-14 12c-1 1-3 3 4 6l8 2c2 1 0 4 0 4-2 1 0 2 1 2 4-5 17 4 19-1l2-4h18c2 0 2 3 3 4 2 3 13-3 18 0h2c-1-2-3-5-1-5 11-2 15-5 11-8l-13-13h-4c-17 7-33 7-50 0z;" +
// bottom arabic text
"path:#d32011,M350 318c2 1 0 4-1 2s-5-4-5-6c3 0 4 3 6 4m-9-5c1 3-5 1-2 0h2m8 8c-3 0-6 4-8 1 1-2 4-1 5-2-1-2-3 2-5 0-2-3 1-6 3-4l5 5m-6-3c-1-2-2 2 0 0m-7-2c1 3-6 1-2 0h2m7 7c-3 1-6 0-8 2-2 0-1-3 1-3-1 0-4 0-2-2s5-1 6 1c1 1 3 0 3 2m-8 2c-3 1-5-2-6-4-1-1-2-5 1-3 1 2 1 5 3 5s2 1 2 2m-6-7c0 3-6 0-2-1l2 1m1 8c-2 0-5 2-6-1 2-1 5 0 3-3 1-2 4 0 3 2v2m-5 1l-9-1h-6c0-3 4-1 5-3 1 3 5 1 6 0 1 1 2 2 2 0 3-1 2 3 2 4m-11-8h-5 5m-3 7c-2-1-7 1-6-2 2-1 6 2 6-2 3-1 1 3 0 4m-6-1c-2 1-3-4-1-5 0-1 1-5 3-3-1 3-4 5-1 7l-1 1m-3-7c-1 3-5-1-2-2l2 2zm-1 6c-2 2-5 2-8 1-2 1-5-3-2-5l3-1c-3 1-2 5 1 5 2 1 5 1 6-2 0-2 3-1 1 0l-1 2;", //end cty
ag: "country:Antigua;bgcolor:;stripe:0,240,0;stripe:190,120,#0072c6;pathstroke:M488 191l-72-19 61-45-75 10 39-65-67 39 12-76-45 60-18-70-20 72-45-61 13 78-66-41 38 65-73-11 60 44-75 20h332,#fcd116;pathstroke:M0 60L320 480L640 60V480H-480,#ce1126", //end cty
//todo detail blue water and 3 dolphins
ai: "country:Anguila;detail:40;gb;shield:#cc3", //end cty
al:
"country:Albania;detail:40;bgcolor:#e41e20;" +
//left half black eagle
// InkScape simplified less detail 360 GZb todo save maybe 20 or 30 bytes
"path:#000,M270 97c-11 1-41 13-17 12 14 19-36-18-18 4 15 3 37 7 8 4 19 8 70 22 42 49-24-1-1-34-30-34-22-9-48-3-63-31-26 26 36 34 40 46-16 13-58-29-40 6 8 14 60-3 31 16-12 13-45-21-33 7 8 20 62-14 36 11-9 15-54-7-33 16 16 4 58-20 27 5-8 11-49 2-25 21 14 4 54-32 32-1-5 20-59 6-32 25 17 8 54-42 35-7-5 22-45 12-40 29 27 24 45-38 62-28 4 13-36 30-6 26 11-3 22-47 22-17-19 16 4 18 10-1 16-20 1 29-15 26-38-4-11 15-11 15-18 8-37 8-49-9-36-2 18 15 9 19-13 1-25-12-35 3 11 1 57-1 26 5-12-2-16 30-6 12 15-4 30-23 45-4 22 11 9-12-7-11-6-5 31-14 38-3 4-14 37-54 32-17-4 21-30 24-41 31 7 19 42-16 25 9-8 5-32 12-9 15 12-8 29-17 15 4-27 1-3 24 6 5 12-25 13 13-2 16 10 14 25 46 23 13l18-204c-10-16-17-35-32-48 17-4-27-12-1-10-6-8-21-10-4-17-12 0-22-6-33-8zm1 9c22 8-21 6 0 0z,s;" +
// Full detail 700 GZb
//+ "path:#000,M270 97c-5 0-13 2-13 5-13-2-15 4-14 9l4-4 6 2 5 4h-12l-6-2-5-5c-3-3-6-2-5 2 2 5 6 7 11 7l9 1h10c-1 1-3 3-6 3-3 1-8-2-11-2 1 2 4 4 10 6 10 2 18 3 24 6 5 3 9 7 11 10 5 6 5 10 5 11 1 10-2 15-8 16-3 1-8 0-10-3-2-2-4-6-3-12 0-2 3-9 1-10l-34-16c-3-1-5 3-6 4-16-2-30-13-37-24-4-8-12 0-11 7 2 8 9 14 16 19 8 4 18 8 28 8 5 1 5 8-1 9-13 1-23 0-32-9-7-7-11 1-9 6 3 13 23 17 42 13 8-1 4 7 1 7-8 6-23 11-36 0-6-5-10-1-7 6 5 17 27 13 43 5 3-2 7 3 2 6-19 14-28 14-36 9-11-5-12 7-6 11 7 4 25 1 38-7 6-4 6 2 3 5-16 13-22 17-38 15-8-1-8 9-2 13 9 5 26-4 39-15 5-2 6 2 3 8-8 10-15 16-22 19-8 3-15 2-19 0-6-2-7 5-4 10 2 4 10 5 19 2s19-11 25-20c6-5 5 2 3 7-13 21-25 28-41 27-7-1-9 4-4 9 7 7 17 7 26 0 8-7 22-23 30-32 5-4 7 0 6 9-2 5-6 11-15 14-7 4-2 10 3 10 3 0 8-4 13-8 5-7 6-11 9-21 3-5 8-3 8 2-2 10-5 12-10 16-5 5 4 6 6 5 9-6 12-13 14-19 2-5 8-3 5 5-6 18-16 25-34 29-2 0-3 1-3 3l8 7-32 9-15-10c-2-4-2-9-11-5-5-3-8-2-11 1 5 0 7 1 8 3 3 6 8 6 13 5l9 8-17-1c-7-6-11-6-16-1-3 1-5 1-7 5 4-2 6-2 8 0 6 3 10 3 14 0l18 1-8 5c-9-3-14 1-16 8-1 3-2 7-1 10 1-3 2-6 5-7 8 2 11-2 12-7l14-7 12 4c2 5 5 7 12 6 7 0 6 3 6 6 2-4 2-7-2-10-2-5-6-7-10-4-5-2-6-4-11-5 12-4 20-4 31-8l8 7h4c7-10 11-20 17-26 3-3 6-7 10-8l5 1 2 9c-1 6-2 8-4 11l-6 9c-4 6-10 9-13 11-6 4-9 2-14 2-7 1-9 4-3 9 5 2 9 3 13 2l10-7c3-4 7 1 4 5-6 7-12 12-20 12-8 1-6 5-1 7 10 4 18-3 23-8 3-4 5-4 5 2-4 10-8 14-16 15-6-1-6 4-1 7 10 7 17-5 20-12s7-3 7 2c0 7-3 13-12 20l21 32 20-223-20-35-11-12v-1l5-1c-5-4-8-6-16-8l9-1c-2-3-7-8-14-10l10-7-20-4-13-4zm1 9c4 0 6 1 6 3s-2 3-6 3-7-2-7-3c0-2 3-3 7-3z,s;"//highdetail
"use:-640,0,-1 1", //end cty
am: "country:Armenia;stripes:#d90012|#0033a0|#f2a800", //end cty
ao: "country:Angola;stripes:#cc092f|#000;pathstroke:m318 227-20-15-21 14 8-23-20-15h24l9-22 8 23 24-1-19 15m14-79-5 13-20-4-1 15c165 43 59 256-72 167l-8 14 17 11-6 13 21 10 7-14 19 4v14h24v-13l19-4 6 12 22-9-6-12 17-11 10 9 16-17-10-9c5-5 9-11 12-17l12 5 9-22-12-5c2-6 3-13 3-19h14v-24h-14c0-7-2-13-4-20l13-5-8-22-13 5-11-17 9-9-17-17-9 9-16-10 5-13,#ffcb00;pathstroke:m406 346l-10 19 4 1c14 4 20 9 26 17 3 3 7 3 10 1l7-5c3-5 2-8-2-11zm-11 18c-31-23-179-71-137-125 35 43 102 78 146 107,#ffcb00,5,#000", //end cty
aq:
"country:Antarctica;bgcolor:#072b5f;" +
"<defs><g id='c' fill='none'>" +
";circle:134,134,50;circle:134,134,93;circle:134,134,133" +
";path:#000,M-100 134h467M134-100v467,s" +
";use:0,0,1,30 133 133" + //+ ";<use transform='rotate(30 134 133)' href='#s'/>"
";use:0,0,1,60 133 133;" + //+ "<use transform='rotate(60 133 133)' href='#s'/>"
"</g>" +
"<clipPath id='d'>" +
";path:#fff,M164 220c-12 7-21-12-10-18 2-13-15-11-24-14-13-2-27 3-40-2-10-2-23-8-23-19 0-9-1-19-11-16-10-6 3-19 1-28 1-6 2-14-6-12-13 0-2-16-13-20-5-4-11-19-3-18 2 9 11 9 18 14 9 6 18 15 30 12 14-1 23-13 22-26 2-13 11-24 23-29 12-2 24 1 36 3 11 5 19 14 31 15 9 3 21 3 28 11 1 13 4 25 4 38 3 8 22 10 13 22 0 10 10 20-1 28-4 12-10 21-16 31-7 10-11 21-24 24-11 2-22 7-33 5,b" +
";</clipPath>" +
"</defs>" +
"<g transform='scale(1.8) translate(45)'>" +
"<use width='267' height='267' href='#b'/>" +
";path:#072b5f,h267v267z" +
";<use width='267' height='267' href='#c' stroke-width='3' stroke='#fff'/>" +
"<use width='267' height='267' href='#c' stroke-width='3' stroke='#072b5f' clip-path='url(#d)'/>" +
"</g>", //end cty
//starrotate 18
//sun:
ar: "country:Argentina;stripes:#75aadb|#fff|#75aadb;rotate:18,<path fill='#fcbf49' stroke='#843511' d='M0 0l28 62s.5 1 1.3.9c.8-.4.3-1.5.3-1l-24-64m-1 24c-1 9 5 15 5 23-1 8 4 13 5 16 1 3-1 5-.3 6s3-2 2-7c-.7-5-4-6-3-16.3.8-10-4-13-3-22'/>;circle:320,240,20,#fcbf49", //end cty
//todo detailM face in sun uruguay
// uy: "country:Uruguay;detail:80;stripes:#fff|#0038a8|#fff|#0038a8|#fff|#0038a8|#fff|#0038a8|#fff;rect:0,0,266,266,#fff;rotate:16,<path fill='#fcd116' d='m0 28l-95-28l95-28' stroke-width='2' stroke='#000'/>,130,135;circle:130,135,40,#fcd116",//end cty
uy: "country:Uruguay;detail:80;stripes:#fff|#0038a8|#fff|#0038a8|#fff|#0038a8|#fff|#0038a8|#fff;rect:0,0,266,266,#fff;rotate:16,<path fill='#fcbf49' stroke='#843511' d='M0 0l28 62s.5 1 1.3.9c.8-.4.3-1.5.3-1l-24-64m-1 24c-1 9 5 15 5 23-1 8 4 13 5 16 1 3-1 5-.3 6s3-2 2-7c-.7-5-4-6-3-16.3.8-10-4-13-3-22'/>,130,135,1.3;circle:130,135,30,#fcd116", //end cty
as: "country:American Samoa;detail:40;bgcolor:#002b7f;pathstroke:m660 10v470L30 240z,#fff,25,#ce1126", //end cty
at: "country:Austria;stripes:#ed2939|#fff|#ed2939", //end cty
//todo star7 fat
au: "country:Australia;bgcolor:#012169;gb;path:#fff,m0 0-18 1 2 18-12-13-12 13 2-18-18-1 15-9-10-15 17 6 5-17 5 17 17-6-10 15,s;use:110,185,2;use:500,80;use:500,390;use:410,210;use:590,190;use:1050,500,.5", //end cty
//todo star 4 points
aw: "country:Aruba;bgcolor:#418fd1;pathstroke:M60 130l79-20l20-79l20 79l79 20l-79 20l-20 79l-20-79z,#ef3340,5,#fff;stripe:270,30,#ffd100;stripe:330,30,#ffd100", //end cty
ax: "country:Alland_Islands;bgcolor:#0053a5;doublecross:-80,0,#ffce00,#d21034,130,50", //end cty
//starrotate 8
az:
"country:Azerbaijan;stripes:#00b9e4|#ed2939|#3f9c35;" +
"circle:304,240,72,#fff;circle:320,240,60,#ed2939;" + //crescent az=azerbijdjan
"rotate:8,<path fill='#fff' d='m0 3l-10-3l10-3'/>,370,240,3", //sun with 8 spikes //end cty
ba: "country:Bosnia and Herzogovina;bgcolor:#002395;pathstroke:m130 0l480 480v-480,#fecb00;star:#fff,10,-20,3;use:30,0,3;use:50,20,3;use:70,40,3;use:90,60,3;use:110,80,3;use:130,100,3;use:150,120,3;use:170,140,3", //end cty
bb: "country:Barbados;bars:#00267f|#ffc726|#00267f;path:#000,m320 135c-7 19-14 39-29 54 5-2 13-3 18-3v80h-22c-1 0-1-1-1-3-2-25-8-45-15-67 0-3-9-14-2-12 1 0 9 3 8 2a85 85 0 0 0-46-24c-1 0-2 1-1 2 22 35 41 75 41 124 9 0 30-5 39-5v56h10l2-157,a;<use transform='matrix(-1 0 0 1 640 0)' href='#a'/>", //end cty
bd: "country:Bangladesh;bgcolor:#006a4e;circle:280,240,150,#f42a41", //end cty
be: "country:Belgium;bars:#000|#fae042|#ed2939", //end cty
bf: "country:Burkina Faso;stripes:#ef2b2d|#009e49;star:#fcd116,35,13,7", //end cty
bg: "country:Bulgaria;stripes:#fff|#00966e|#d62612", //end cty
bh: "country:Bahrein;bgcolor:#ce1126;path:#fff,m114 480l-146 1V0h180l94 48-99 48 99 48-99 48 99 48-99 48 99 48-99 48 99 48-99 48 99", //end cty
bi: "country:Burundi;bgcolor:#ce1126;pathstroke:M-70 0L710 480h70v-480h-70L-70 480,#1eb53a,70,#fff;circle:320,240,140,#fff;path:#ce1126,M350 180l-19.2.4-10 16-10-16-19-0 9-17-9-17 19-0 10-16 10 16 19.2.4-9 17zm-65 112,s,4,#1eb53a;use:-60,110;use:60,110", //end cty
bj: "country:Benin;stripes:#fcd116|#e8112d;bar:0,260,#008751", //end cty
bl: "country:Saint Barthelemy;flag:fr", //end cty
//todo detail shield
bm: "country:Bermuda;detail:40;gb:#d00c27;shield", //end cty
//todo detailH red cresent and hands and yellow text
bn: "country:Brunei;detail:60;bgcolor:#f7e017;line:100,#fff,-50,70,690,315;line:100,#000,-50,165,690,410", //end cty
// !todo high detaul where has it gone!!
bo: "country:Bolivia;detail:40;stripes:#d52b1e|#f9e300|#007934", //end cty
bq: "country:Bonaire;bgcolor:;triangle:0,480,640,0,640,480,#012a87;triangle:0,0,0,225,300,0,#f9d90f;circle:165,230,80,none,14,#000;rotate:6,<path fill='#dc171d' d='M30 0 0 50-30 0'/>,165,230;rotate:4,<path fill='#000' d='M20 80 0 110-20 80'/>,165,230", //end cty
//brazil colors wikipedia:green:#009c3b yellow:#ffdf00 blue:#002776 white
br: "country:Brazil;bgcolor:#009b3a;pathstroke:M20 240l300-200l300 200l-300 200,#fedf00;circle:320,240,120,#002776;path:none,m200 200q150-20 240 80,c,20,#fff;<text dx='10' dy='5' fill='green' letter-spacing='3' font-family='Arial' font-weight='bold'><textPath alignment-baseline='top' href='#c'>ORDEM E PROGRESSO</textPath></text>;path:#fff,M4 2l1 4h4l-3 2 1 4-3-2-3 2 1-4-3-2h4,s;use:220,205;use:274,247;use:220,289;use:238,275;use:256,289;use:274,317;use:310,261;use:310,303;use:292,275;use:328,275;use:301,282;use:346,191;use:382,275;use:382,289;use:400,289;use:364,303;use:364,317'/>;use:346,317", //end cty
bs: "country:Bahamas;striangle:#00778b|#ffc72c|#00778b", //end cty
//todo detail white dragon
bt: "country:Bhutan;detail:40;bgcolor:#ffd520;triangle:0,480,640,480,640,0,#ff4e12", //end cty
bw: "country:Botswana;bgcolor:#75aadb;rect:-20,185,680,100,#000,20,#fff", //end cty
//colors: #ce1720 , #007c30 - wikipedia brighter red/green
//colors: #c8313e , #4aa657 - flag colors pale red/green
by:
"country:Belarus;detail:900;bgcolor:#c8313e;stripe:300,300,#4aa657;" +
//white bar
"bar:0,120;" +
//pattern , re-used 3 times
//SVG because there is a transform on it
"<path fill='#c8313e' id='s' d='" +
//!! original detail, app 530 bytes