-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathapp.html
3543 lines (3413 loc) · 253 KB
/
app.html
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
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="UTF-8">
<title>ArtDraw SVG Editor Online</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css?z=27" type="text/css">
<link rel='canonical' href="https://artdraw.org/svg/app.html" />
</head>
</head>
<body>
<div id="divWeb">
<div id="divTopMenu">
<ul class="topMenu">
<li title="Home">
<a href="https://artdraw.org/" target="_blank" class="dropbtn" style="padding:2px 6px;height:28px;cursor:pointer;">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:0;fill:var(--text-color);" d="M21.554,8.168l-9-6A1,1,0,0,0,12,2h0a1,1,0,0,0-.554.168h0l-9,6a1,1,0,0,0-.278,1.387l0,0A1.05,1.05,0,0,0,3,10H4V21a1,1,0,0,0,1,1H19a.99.99,0,0,0,.389-.079,60.628,60.628,0,0,0,.318-.214A1,1,0,0,0,20,21V10h1a1,1,0,0,0,.555-1.832ZM10,20V13h4v7Zm6,0V12a1,1,0,0,0-1-1H9a1,1,0,0,0-1,1v8H6V8.2l6-4,6,4V20Z"></path>
</svg>
</a>
</li>
<li class="dropdown" title="File">
<a href="javascript:void(0)" class="dropbtn" style="padding:2px 6px 2px 12px;;height: 28px;">
<svg class="svgIconTopMenu" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:15;fill:var(--text-color);stroke:var(--text-color);" d="M878 448H242l-96 384h636l96-384zM832 384v-64H486L358 192H128v448l58-232A32 32 0 01217 384H832zm-25 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h288l128 128H864a32 32 0 0132 32v96h23a32 32 0 0131 40l-112 448A32 32 0 01807 896z"></path>
</svg>
</a>
<div class="dropdown-content">
<a href="#">New</a>
<a id="btnImportFile" mouseUp="__showModal" class="modalOpen" idModal="frmOpenDocument" href="#">Import File</a>
<a mouseUp="MCKbtnSaveFileClick" id="btnSaveFile" href="#">Download File SVG</a>
<a mouseUp="MCKbtnExportPNG" id="btnEsportPNG" href="#">Export Image PNG</a>
<a mouseUp="MCKOpenPublishForm" href="#">Publish Web</a>
<a href="#">My Web Files..</a>
<a mouseUp="OpenImageNewTab" id="btnOpenImageNewTab" href="#">Print</a>
<a mouseUp="__showModal" class="modalOpen" idModal="frmMasterUpload" href="#" style="display:none">Master Upload</a>
</div>
</li>
<li><a id="btnWorkTable" mouseUp="__showModal" class="modalOpen" idModal="frmSetupJob" href="#" style="display:none;">Work Table</a></li>
<li><a mouseUp="MCKbtnTopMenuPluginsClick" id="btnTopMenuPlugins" href="#" style="display:none;">Plugins</a></li>
<li title="Settings">
<a class="dropbtn" mouseUp="__showModal" class="modalOpen" idModal="frmConfigEditor" style="padding:2px 6px;height:28px;cursor:pointer;">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:1.5;fill:transparent;stroke:var(--text-color);" d="M19.4,13c0-0.3,0.1-0.7,0.1-1s0-0.7-0.1-1l2.1-1.5c0.2-0.1,0.3-0.4,0.1-0.7l-2-3.5C19.5,5,19.2,4.9,19,5l-2.4,1.1
c-0.5-0.4-1.2-0.8-1.8-1l-0.3-2.6C14.5,2.2,14.3,2,14,2h-4C9.7,2,9.5,2.2,9.5,2.5L9.2,5C8.5,5.3,7.9,5.6,7.4,6L5,5
C4.8,4.9,4.5,5,4.4,5.2l-2,3.5C2.2,9,2.2,9.3,2.5,9.4L4.6,11c0,0.3-0.1,0.7-0.1,1s0,0.7,0.1,1l-2.1,1.5c-0.2,0.1-0.3,0.4-0.1,0.7
l2,3.5C4.5,19,4.8,19.1,5,19l2.4-1.1c0.5,0.4,1.2,0.8,1.8,1l0.3,2.6c0,0.3,0.2,0.5,0.5,0.5h4c0.3,0,0.5-0.2,0.5-0.5l0.3-2.6
c0.7-0.3,1.3-0.6,1.8-1L19,19c0.2,0.1,0.5,0,0.6-0.2l2-3.5c0.1-0.2,0.1-0.5-0.1-0.7L19.4,13z M12,16c-2.2,0-4-1.8-4-4s1.8-4,4-4
s4,1.8,4,4S14.2,16,12,16z"></path>
</svg>
</a>
</li>
<li style="margin-left:48px;">
<p style="display:inline-block">Width: </p>
<div class="contSufix">
<input change="changeSizeW" type="number" style="margin-top:5px;width:52px;">
</div>
<p style="display:inline-block;margin-left:8px;">Height: </p>
<div class="contSufix">
<input change="changeSizeH" type="number" style="margin-top:5px;width:52px;">
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" style="padding:2px 6px 2px 12px;;height: 28px;">
<svg class="svgIconTopMenu" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:15;fill:var(--text-color);stroke:var(--text-color);" d="M119.899,27.465L0,185.228h73.625v293.978h92.548V185.228h73.625L119.899,27.465z M149.841,168.896v293.978H89.957 V168.896H32.925l86.974-114.439l86.974,114.439H149.841z"></path>
<path class="svgss svgff" style="stroke-width:15;fill:var(--text-color);stroke:var(--text-color);" d="M438.375,326.772V32.795h-92.549v293.978h-73.625l119.899,157.763L512,326.772H438.375z M305.127,343.104h57.032V49.127 h59.884v293.978h57.032l-86.974,114.439L305.127,343.104z"></path>
</svg>
</a>
<div class="dropdown-content" style="min-width:120px;width:120px;">
<a href="#" mouseup="MCKapplyZorder" toposition="front" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" x="1.3847" y="58.1684" width="45.8929" height="3.682"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" d="M1.3848 48.5688c11.984,0 23.9678,0 35.9519,0 0,-1.2273 0,-2.4546 0,-3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,1.2274 0,2.4547 0,3.682z"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" d="M1.3848 35.2874c11.984,0 23.9678,0 35.9519,0 0,-1.2274 0,-2.4546 0,-3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,1.2274 0,2.4546 0,3.682z"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" d="M1.3848 22.006c11.984,0 23.9678,0 35.9519,0 0,-1.2274 0,-2.4547 0,-3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,1.2273 0,2.4546 0,3.682z"/>
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" x="1.3847" y="5.0425" width="35.952" height="3.682"/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" points="49.7353,4.6307 62.2278,4.6307 62.2278,61.7361 49.7353,61.7361 49.7353,58.3171 58.8088,58.3171 58.8088,8.0497 49.7353,8.0497 "/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" points="51.8565,0.6832 51.8565,12.5575 40.9074,7.0059 "/>
</svg>
</div>
<div class="divText">
<span>Front</span>
</div>
</div>
</a>
<a href="#" mouseup="MCKapplyZorder" toposition="forward" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil0" x="1.5161" y="56.1959" width="45.8929" height="3.682"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" d="M1.5162 33.3149c11.984,0 23.9678,0 35.9519,0 0,-1.2274 0,-2.4546 0,-3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,1.2274 0,2.4546 0,3.682z"/>
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" x="1.5161" y="3.07" width="35.952" height="3.682"/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="49.8667,30.5982 62.3592,30.5982 62.3592,59.7636 49.8667,59.7636 49.8667,56.3446 58.9402,56.3446 58.9402,34.0172 49.8667,34.0172 "/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="51.9396,25.5367 51.9396,37.411 40.9905,31.8594 "/>
</svg>
</div>
<div class="divText">
<span>Forward</span>
</div>
</div>
</a>
<a href="#" mouseup="MCKapplyZorder" toposition="backward" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil0" x="1.5161" y="1.3605" width="45.8929" height="3.682"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" d="M1.5162 27.9235c11.984,0 23.9678,0 35.9519,0 0,1.2274 0,2.4546 0,3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,-1.2274 0,-2.4546 0,-3.682z"/>
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" x="1.5161" y="54.4864" width="35.952" height="3.682"/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="49.8667,30.6402 62.3592,30.6402 62.3592,1.4748 49.8667,1.4748 49.8667,4.8938 58.9402,4.8938 58.9402,27.2212 49.8667,27.2212 "/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="51.9396,35.7017 51.9396,23.8274 40.9905,29.379 "/>
</svg>
</div>
<div class="divText">
<span>Backward</span>
</div>
</div>
</a>
<a href="#" mouseup="MCKapplyZorder" toposition="back" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil0" x="1.5161" y="1.3605" width="45.8929" height="3.682"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" d="M1.5162 14.6421c11.984,0 23.9678,0 35.9519,0 0,1.2273 0,2.4546 0,3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,-1.2274 0,-2.4547 0,-3.682z"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" d="M1.5162 27.9235c11.984,0 23.9678,0 35.9519,0 0,1.2274 0,2.4546 0,3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,-1.2274 0,-2.4546 0,-3.682z"/>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" d="M1.5162 41.2049c11.984,0 23.9678,0 35.9519,0 0,1.2274 0,2.4547 0,3.682 -11.9841,0 -23.9679,0 -35.9519,0 0,-1.2273 0,-2.4546 0,-3.682z"/>
<rect class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil1" x="1.5161" y="54.4864" width="35.952" height="3.682"/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="49.8667,58.5802 62.3592,58.5802 62.3592,1.4748 49.8667,1.4748 49.8667,4.8938 58.9402,4.8938 58.9402,55.1612 49.8667,55.1612 "/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" class="fil2" points="51.9879,62.5277 51.9879,50.6534 41.0388,56.205 "/>
</svg>
</div>
<div class="divText">
<span>Back</span>
</div>
</div>
</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" style="padding:2px 6px;height: 28px;">
<svg class="svgIconTopMenu" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 7;" points="0,100 40,0 40,100"/>
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:none;stroke-width: 8;" points="100,100 60,0 60,100"/>
</svg>
</a>
<div class="dropdown-content" style="min-width:120px;width:120px;">
<a mouseup="MCKapplyMirrorClick" mirrorType="horizontal" href="#" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" points="0,0 50,45 100,0"/>
<polygon class="svgss" style="stroke:var(--text-color);fill:none;stroke-width: 8;" points="0,100 50,45 100,100"/>
<line class="svgss" x1="0" y1="50" x2="100" y2="50" style="stroke:var(--text-color);fill:none;stroke-width:10;stroke-dasharray: 10;" />
</svg>
</div>
<div class="divText">
<span>Horizontal</span>
</div>
</div>
</a>
<a mouseup="MCKapplyMirrorClick" mirrorType="vertical" href="#" style="padding: 0px 12px;">
<div class="menuTopSVGparent">
<div class="divIcon">
<svg class="svgIconTopMenu" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" points="0,0 50,50 0,100"/>
<polygon class="svgss" style="stroke:var(--text-color);fill:none;stroke-width: 8;" points="100,0 50,50 100,100"/>
<line class="svgss" x1="50" y1="0" x2="50" y2="100" style="stroke:var(--text-color);fill:none;stroke-width:10;stroke-dasharray: 10;" />
</svg>
</div>
<div class="divText">
<span>Vertical</span>
</div>
</div>
</a>
</div>
</li>
<li id="liGroup" title="Group Elements">
<a mouseUp="MCKbtnGroupClick" class="dropbtn" style="padding:2px 6px;height:28px;cursor:pointer;" >
<svg class="svgIconTopMenu" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="fill:var(--text-color);stroke:var(--text-color);stroke-width: 2;" d="M60,8V0h-8v3H8V0H0v8h3v44H0v8h8v-3h44v3h8v-8h-3V8H60z M55,52h-3v3H8v-3H5V8h3V5h44v3h3V52z"></path>
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:1;fill:var(--text-color);" d="M36,13H12v24h11v11h24V24H36V13z M18,35h-4v-4v-6v-6v-4h4h6h6h4v4v5v1v6v4h-4h-6h-1H18z"></path>
</svg>
</a>
</li>
<li id="liCombine" title="Combine Elements">
<a mouseUp="MCKbtnCombineClick" class="dropbtn" style="padding:2px 6px;height:28px;cursor:pointer;">
<svg class="svgIconTopMenu" viewBox="2 5 28 25" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:0.25;fill:var(--text-color);" d="M22,24H18V22h4V18h2v4A2.0021,2.0021,0,0,1,22,24Z" transform="translate(0 0)"></path>
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:0.25;fill:var(--text-color);" d="M10,14H8V10a2.0022,2.0022,0,0,1,2-2h4v2H10Z" transform="translate(0 0)"></path>
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:0.25;fill:var(--text-color);" d="M28,8H24V4a2.0023,2.0023,0,0,0-2-2H4A2.0023,2.0023,0,0,0,2,4V22a2.0023,2.0023,0,0,0,2,2H8v4a2.0023,2.0023,0,0,0,2,2H28a2.0023,2.0023,0,0,0,2-2V10A2.0023,2.0023,0,0,0,28,8Zm0,20H10V24h4V22H10V18H8v4H4V4H22V8H18v2h4v4h2V10h4Z" transform="translate(0 0)"></path>
</svg>
</a>
</li>
<li id="liAlign" title="Align Guides">
<a mouseUp="MCKAlignGuides" class="dropbtn" style="padding:2px 6px;height:28px;cursor:pointer;">
<svg class="svgIconTopMenu" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke:var(--text-color);stroke-width:3;fill:var(--text-color);" d="M425.7.1C425.7 0 465.7 0 465.7.1 465.7 0 465.7 89.8 465.7 90.1 465.7 89.8 425.7 89.8 425.7 90.1 425.7 89.8 425.7 0 425.7.1 425.7 0 425.7 0 425.7.1ZM134.3.1C134.3 0 174.1 0 174.1.1 174.1 0 174.1 89.8 174.1 90.1 174.1 89.8 134.3 89.8 134.3 90.1 134.3 89.8 134.3 0 134.3.1 134.3 0 134.3 0 134.3.1ZM134.3 119.9C134.3 119.5 134.3 480 134.3 480.3 134.3 480 465.7 480 465.7 480.3 465.7 480 465.7 119.5 465.7 119.9 465.7 119.5 134.3 119.5 134.3 119.9 134.3 119.5 134.3 119.5 134.3 119.9M425.7 444.5C425.7 444.2 174.1 444.2 174.1 444.5 174.1 444.2 174.1 155.5 174.1 155.6 174.1 155.5 425.7 155.5 425.7 155.6 425.7 155.5 425.7 444.2 425.7 444.5 425.7 444.2 425.7 444.2 425.7 444.5ZM499 119.9C499 119.5 600 119.5 600 119.9 600 119.5 600 155.5 600 155.6 600 155.5 499 155.5 499 155.6 499 155.5 499 119.5 499 119.9 499 119.5 499 119.5 499 119.9ZM0 119.9C0 119.5 100.9 119.5 100.9 119.9 100.9 119.5 100.9 155.5 100.9 155.6 100.9 155.5 0 155.5 0 155.6 0 155.5 0 119.5 0 119.9 0 119.5 0 119.5 0 119.9ZM0 444.5C0 444.2 100.9 444.2 100.9 444.5 100.9 444.2 100.9 480 100.9 480.3 100.9 480 0 480 0 480.3 0 480 0 444.2 0 444.5 0 444.2 0 444.2 0 444.5ZM134.3 510C134.3 509.7 174.1 509.7 174.1 510 174.1 509.7 174.1 599.7 174.1 600 174.1 599.7 134.3 599.7 134.3 600 134.3 599.7 134.3 509.7 134.3 510 134.3 509.7 134.3 509.7 134.3 510ZM425.7 510C425.7 509.7 465.7 509.7 465.7 510 465.7 509.7 465.7 599.7 465.7 600 465.7 599.7 425.7 599.7 425.7 600 425.7 599.7 425.7 509.7 425.7 510 425.7 509.7 425.7 509.7 425.7 510ZM499 444.5C499 444.2 600 444.2 600 444.5 600 444.2 600 480 600 480.3 600 480 499 480 499 480.3 499 480 499 444.2 499 444.5 499 444.2 499 444.2 499 444.5Z"></path>
</svg>
</a>
</li>
<li id="liUser" title="User Login" style="position: absolute;right:220px;">
<a mouseUp="MCKshowUserLogin" style="padding:2px 6px;height:28px;cursor:pointer;text-align:left;width:120px;border-radius:12px;">
<svg class="svgIconTopMenu" viewBox="0 0 459 459" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:var(--text-color-inv);fill:var(--text-color-inv);stroke-width: 7;" d="M229.5,0C102.53,0,0,102.845,0,229.5C0,356.301,102.719,459,229.5,459C356.851,459,459,355.815,459,229.5 C459,102.547,356.079,0,229.5,0z M347.601,364.67C314.887,393.338,273.4,409,229.5,409c-43.892,0-85.372-15.657-118.083-44.314 c-4.425-3.876-6.425-9.834-5.245-15.597c11.3-55.195,46.457-98.725,91.209-113.047C174.028,222.218,158,193.817,158,161 c0-46.392,32.012-84,71.5-84c39.488,0,71.5,37.608,71.5,84c0,32.812-16.023,61.209-39.369,75.035 c44.751,14.319,79.909,57.848,91.213,113.038C354.023,354.828,352.019,360.798,347.601,364.67z"/>
</svg>
<span style="display:inline-block;position:absolute;top:9px;padding-left:6px;word-wrap:normal;overflow:hidden;max-width:86px;pointer-events:none;">Login</span>
</a>
</li>
</ul>
</div>
<div id="divLeftMenu">
<ul class="features-list">
<li id="btnSelect" mouseUp="MCKbtnSelectClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width:0.5;" d="M8 1h6-6Zm11.2 18.5L16 22l-3.5-4.5-3 3.5L7 7l13 6.5-4.5 1.5 3.7 4.5ZM19 4V1h-3M6 1H3v3m0 10v3h3M19 6v4-4ZM3 12V6v6Z"></path>
</svg>
</li>
<li id="btnHandLine" mouseUp="MCKbtnHandLineClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path class="svgff" style="stroke:none;fill:var(--text-color);" d="M404 0 54 349.9 0 512l162.1-54L512 108 404 0zM295.7 151.3l21.6 21.6-206.8 206.8L89 358.1l206.8-206.8zM71.5 456l-15.4-15.4 18-54 51.5 51.4-54 18zm82.4-33-21.6-21.5L339 194.6l21.6 21.6L153.9 423zm228.4-228.3-64.9-64.9 21.7-21.6 64.8 64.8-21.6 21.7zM360.7 86.5l43.2-43.3 64.9 64.9-43.3 43.2-64.8-64.8z"/>
</svg>
</li>
<li id="btnRect" mouseUp="MCKbtnRectClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 7.5 7.5" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:0.5;fill:none;" d="M 0.29299366,0.29299366 H 7.0904471 V 7.0904471 H 0.29299366 Z"></path>
</svg>
</li>
<li id="btnEllipse" mouseUp="MCKbtnEllipseClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 7.5 7.5" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:0.5;fill:none;" d="M 7.1044111,3.7307858 A 3.393158,3.3736248 0 0 1 3.7112532,7.1044106 3.393158,3.3736248 0 0 1 0.31809521,3.7307858 3.393158,3.3736248 0 0 1 3.7112532,0.35716105 3.393158,3.3736248 0 0 1 7.1044111,3.7307858 Z"></path>
</svg>
</li>
<li id="btnPoly" mouseUp="MCKbtnPolyClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 7.5 7.5" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:0.5;fill:none;" d="M 1.8360936,1.0743104 A 0.7227177,0.7227177 0 0 1 1.1133759,1.7970281 0.7227177,0.7227177 0 0 1 0.3906582,1.0743104 0.7227177,0.7227177 0 0 1 1.1133759,0.35159272 0.7227177,0.7227177 0 0 1 1.8360936,1.0743104 Z M 7.0513811,6.3091307 A 0.7227177,0.7227177 0 0 1 6.3286633,7.0318484 0.7227177,0.7227177 0 0 1 5.6059456,6.3091307 0.7227177,0.7227177 0 0 1 6.3286633,5.586413 0.7227177,0.7227177 0 0 1 7.0513811,6.3091307 Z M 1.7598688,1.6817371 5.7603023,5.7017036"></path>
</svg>
</li>
<li id="btnText" mouseUp="MCKbtnTextClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:1.5;stroke:var(--text-color);fill:var(--text-color);" d="M61.4 2.4C60.9.8 59.5 0 58.5 0A193464.5 193464.5 0 0 0 5.7 0C4 0 3 1.2 2.7 2.4c-.2.7-.2-.6-.2 17.8v.5c.5 1.9 2 2.7 3.8 2.7 3.3 0 7.4-2.7 7.9-7.4v-.4h11.3v35.7H22.2a4.7 4.7 0 0 0-4.3 3.2c-.3 1-.2 1.3-.2 4.6V59s0 3.6 3.2 4.7c.8.3 8 .3 13.8.3h7a4.8 4.8 0 0 0 4.3-3.2c.4-1 .3-1.2.3-4.8v.1s0-3.4-3-4.5c-.8-.2-1.1-.3-2.4-.3h-2.4V15.5h11.3a8 8 0 0 0 8.1 7.9c1 0 2.3-.2 3-1.5.2-.2.4-.5.5-1V2.5zm-2 18.2-.2.3c-.1.3-.4.5-1.3.5h-.4a6 6 0 0 1-5.7-5.9v-2H36.5v39.9h4.4l1.7.1c1.5.5 1.7 2.1 1.7 2.5a352.6 352.6 0 0 0-.2 4.2c-.3 1-1.3 1.7-2.5 1.8a285 285 0 0 1-20.1-.2c-1.6-.6-1.8-2.3-1.8-2.7v-1.5l.1-2.5c.4-1 1.3-1.7 2.5-1.8h5.2V13.6H12.2V15.8a6.2 6.2 0 0 1-5.9 5.6c-1.4 0-1.7-.7-1.7-1V2.8c0-.3.4-.8 1.2-.8H58.5c.1 0 .6.1.9.8v17.8z"></path>
</svg>
</li>
<li id="btnShapes" mouseUp="MCKbtnShapesClick" class="features-item btnTool draft">
<svg class="svgIcon" viewBox="0 0 369 369" xmlns="http://www.w3.org/2000/svg">
<path class="svgff" style="stroke:none;fill:var(--text-color);stroke-width:0;" d="M40.5 370h289a40.6 40.6 0 0 0 40.5-40.6V40.5A40.6 40.6 0 0 0 329.4 0H40.5A40.6 40.6 0 0 0 0 40.5v289A40.6 40.6 0 0 0 40.5 370zM18.7 40.5c0-12 9.8-21.8 21.8-21.8h289c12 0 21.8 9.8 21.8 21.8v289c0 12-9.8 21.8-21.9 21.8H40.5c-12 0-21.8-9.8-21.8-21.9V40.5z"></path>
<path class="svgff" style="stroke:none;fill:var(--text-color);stroke-width:0;" d="M47.4 174.5h118c5.1 0 9.3-4.2 9.3-9.4V47.2c0-5.1-4.2-9.3-9.4-9.3H47.4a9.3 9.3 0 0 0-9.3 9.3v118c0 5.1 4.2 9.3 9.3 9.3zm9.4-118H156v99.3H56.8V56.6zM266.7 174.5a68.4 68.4 0 1 0-.1-136.8 68.4 68.4 0 0 0 .1 136.8zm49.6-68.3a49.7 49.7 0 1 1-99.3-.1 49.7 49.7 0 0 1 99.3 0zM38 303.8l57.3 33.3a9.3 9.3 0 0 0 9.4 0l57.4-33a9.4 9.4 0 0 0 4.6-8l.2-66.3c0-3.3-1.8-6.4-4.7-8L105 188.4a9.3 9.3 0 0 0-9.4 0l-57.4 33a9.3 9.3 0 0 0-4.7 8l-.1 66.2c0 3.4 1.8 6.5 4.7 8.1zM52.3 235l48-27.6 48 27.8-.1 55.4-48 27.6-48-27.8.1-55.4zM223.4 281.7l-14 43.1a9.4 9.4 0 0 0 14.4 10.5l36.7-26.7 36.7 26.7a9.4 9.4 0 0 0 14.4-10.5l-14-43.1 36.7-26.7a9.3 9.3 0 0 0-5.5-16.9h-45.4l-14-43.1a9.3 9.3 0 0 0-17.8 0l-14 43.1h-45.4a9.4 9.4 0 0 0-5.5 17l36.7 26.6zm21-24.9c4 0 7.6-2.6 8.9-6.5l7.2-22.2 7.2 22.2a9.4 9.4 0 0 0 9 6.5H300l-18.9 13.7a9.4 9.4 0 0 0-3.4 10.5l7.2 22.2-18.9-13.7a9.4 9.4 0 0 0-11 0l-18.9 13.7 7.2-22.2c1.3-3.9-.1-8-3.4-10.5L221 256.8h23.4z"></path>
</svg>
</li>
<li id="btnZoomBtn" class="features-item btnTool draft bgdark">
<svg class="svgIcon" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:0.1;stroke:var(--text-color);fill:var(--text-color);" d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm6.32-1.094l3.58 3.58a1 1 0 1 1-1.415 1.413l-3.58-3.58a8 8 0 1 1 1.414-1.414z'></path>
</svg>
<ul class="sub-menu">
<li mouseUp="zoomMore" class="pure-menu-item">
<svg class="svgIcon" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:0.1;stroke:var(--text-color);fill:var(--text-color);" d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm6.32-1.094l3.58 3.58a1 1 0 1 1-1.415 1.413l-3.58-3.58a8 8 0 1 1 1.414-1.414zM9 7h2a1 1 0 0 1 0 2H9v2a1 1 0 0 1-2 0V9H5a1 1 0 1 1 0-2h2V5a1 1 0 1 1 2 0v2z'></path>
</svg>
</li>
<li mouseUp="zoomMinus" class="pure-menu-item">
<svg class="svgIcon" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:0.1;stroke:var(--text-color);fill:var(--text-color);" d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm6.32-1.094l3.58 3.58a1 1 0 1 1-1.415 1.413l-3.58-3.58a8 8 0 1 1 1.414-1.414zM5 7h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z'></path>
</svg>
</li>
<li mouseUp="zoomFit" class="pure-menu-item">
<svg class="svgIcon" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:0.1;stroke:var(--text-color);fill:var(--text-color);" d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm6.32-1.094l3.58 3.58a1 1 0 1 1-1.415 1.413l-3.58-3.58a8 8 0 1 1 1.414-1.414z'></path>
</svg>
</li>
<li class="pure-menu-item">
<svg class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke-width:12;stroke:var(--text-color);fill:var(--text-color);" d="M459.04,85.675c-21.7-6.332-32.939,15.462-40.67,30.447l-24.695,57.958l15.659-104.422
c2.244-13.628-0.375-25.677-7.381-33.929c-5.547-6.537-13.389-10.129-22.101-10.129c-16.7,0-31.249,14.549-37.146,37.41
l-18.586,86.81V42.906c0.358-13.056-3.635-24.559-11.255-32.384C306.174,3.635,297.155,0,286.787,0
c-29.065,0-36.173,28.45-39.211,40.593c-0.145,0.563-0.222,1.126-0.247,1.698l-4.403,101.265L230.202,50.27
c-3.985-36.318-25.404-41.737-37.82-41.737c-22.554,0-38.929,17.946-38.903,43.298l17.067,230.4
c0.35,4.693,4.284,8.243,9.139,7.876c4.702-0.35,8.226-4.437,7.876-9.139L170.52,51.2c0-12.74,6.758-25.6,21.862-25.6
c4.446,0,17.946,0,20.881,26.752l25.6,187.733c0.597,4.378,4.565,7.603,8.849,7.373c4.412-0.205,7.936-3.746,8.132-8.158
l8.491-195.388c5.726-22.332,12.851-26.846,22.451-26.846c5.734,0,10.394,1.801,13.85,5.35c4.378,4.497,6.647,11.605,6.417,20.25
V230.4c0,4.369,3.294,8.021,7.629,8.491c4.395,0.384,8.329-2.441,9.242-6.707L359.32,66.935
c3.115-12.083,10.675-24.269,20.531-24.269c3.669,0,6.81,1.417,9.088,4.104c3.652,4.309,4.958,11.639,3.541,20.233l-25.6,170.667
c-0.64,4.25,1.98,8.303,6.11,9.472c4.156,1.169,8.508-0.913,10.18-4.864l50.62-118.895c10.402-20.07,15.061-22.886,20.471-21.325
c3.849,1.118,8.627,2.517,5.914,15.915c-0.247,1.109-25.062,111.386-33.348,162.261c-2.603,16.009-4.395,35.49-6.46,58.044
c-4.343,47.275-9.702,105.685-25.66,156.655H203.049C183.405,408.482,115.71,300.023,74.187,258.5
c-7.424-7.424-20.326-21.615-23.04-24.593c0.077-0.154,0.205-0.384,0.444-0.7l3.695-3.593c9.967-9.958,43.315-9.95,53.282,0
l32.666,32.666c3.337,3.328,8.738,3.328,12.066,0c3.337-3.336,3.337-8.738,0-12.066l-32.666-32.666
c-16.64-16.64-60.774-16.64-77.329-0.094l-4.002,3.891c-0.222,0.213-0.427,0.444-0.623,0.683
c-5.717,6.912-6.212,15.13-1.306,21.999c0.188,0.265,0.393,0.521,0.614,0.759c0.631,0.7,15.539,17.195,24.132,25.779
c40.977,40.986,108.407,149.598,125.517,233.839c0.461,4.267,4.087,7.595,8.482,7.595h204.8c3.678,0,6.929-2.347,8.09-5.837
c18.057-54.17,23.765-116.352,28.348-166.323c2.048-22.238,3.814-41.446,6.323-56.858c8.183-50.372,32.896-160.154,33.186-161.434
C481.722,97.604,469.852,88.832,459.04,85.675z"></path>
</svg>
</li>
</ul>
</li>
</ul>
</div>
<div id="divRulerCanvasTop"><canvas mouseUp="clickCanvas" id="canvasTop" height="20px" width="1800px" style="background:#e9e8e8;border-left:1px solid var(--text-color);border-top:1px solid var(--text-color);"></canvas></div>
<div id="divRulerCanvasLeft"><canvas mouseUp="clickCanvas"id="canvasLeft" width="20px" height="1600px" style="background:#e9e8e8;border-left:1px solid var(--text-color);border-top:1px solid var(--text-color);"></canvas> </div>
<div id="divCanvas">
</div>
</div>
<div id="divPalette">Paleta Colores</div>
<div id="divHelpers">
<span id="infoXY">X: 0.00 Y: 0.00</span>
<span id="AYUDA" onmouseover="this.hide();">Click en el boton X para cerrar.</span>
</div>
<div id="frmOpenDocument" class="frmModal" force="99">
<div class="modal-content w-60">
<div class="modal-header"><span class="closeModal">×</span><h2>Import Images & Vectors</h2></div>
<div id="divOpenDocument" class="modal-body">
<table class="w-100 mt-4">
<tr>
<td class="py-3"><p class="text-center py-2" style="background-color: var(--background-hover)!important;color: var(--text-color-inv)!important;;font-size:24px;text-align:center;width:95%;">From local disk</p></td>
<td class="py-3"><p class="text-center py-2" style="background-color: var(--background-hover)!important;color: var(--text-color-inv)!important;;font-size:24px;text-align:center;width:95%;">From URL</p></td>
</tr>
<tr>
<td class="text-center">
<svg width="35%" height="35%" viewBox="0 0 448 448" xmlns="http://www.w3.org/2000/svg">
<g>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m425.792,42.05h-58.72c-12.37,0-22.433,10.063-22.433,22.433v197.775c0,12.101 9.845,21.945 21.945,21.945h59.696c12.101,0 21.945-9.844 21.945-21.945v-197.775c0.001-12.37-10.062-22.433-22.433-22.433zm7.434,220.208c0,3.83-3.116,6.945-6.945,6.945h-59.696c-3.83,0-6.945-3.116-6.945-6.945v-197.775c0-4.099 3.334-7.433 7.433-7.433h58.72c4.099,0 7.434,3.334 7.434,7.433v197.775z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m308.638,233.024v-163.474c0-2.761-2.239-5-5-5h-276.138c-2.761,0-5,2.239-5,5v163.474c0,2.761 2.239,5 5,5h276.138c2.761,0 5-2.238 5-5zm-10-5h-266.138v-153.474h266.138v153.474z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m113.336,269.203h-20.489c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5 7.5,7.5h145.444c4.142,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-20.489l-3.584-8.679h94.974c12.101,0 21.945-9.845 21.945-21.945v-174.584c0-12.101-9.845-21.945-21.945-21.945h-287.247c-12.1,0-21.945,9.845-21.945,21.945v174.583c0,12.101 9.845,21.945 21.945,21.945h94.975l-3.584,8.68zm88.238,0h-72.009l3.584-8.679h64.84l3.585,8.679zm-186.574-30.624v-174.584c0-3.83 3.116-6.945 6.945-6.945h287.247c3.83,0 6.945,3.116 6.945,6.945v174.583c0,3.83-3.116,6.945-6.945,6.945h-287.247c-3.829,0.001-6.945-3.115-6.945-6.944z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m423.804,62.41h-54.742c-2.761,0-5,2.239-5,5v118.467c0,2.761 2.239,5 5,5h54.742c2.761,0 5-2.239 5-5v-118.467c0-2.762-2.239-5-5-5zm-5,10v38.467h-44.742v-38.467h44.742zm-44.742,61.799v-13.333h44.742v13.333h-44.742zm44.742,10v13.333h-44.742v-13.333h44.742zm-44.742,36.667v-13.333h44.742v13.333h-44.742z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m380.436,199.542c-1.32,0-2.61,0.53-3.54,1.47-0.93,0.92-1.46,2.21-1.46,3.53s0.53,2.61 1.46,3.54 2.22,1.46 3.54,1.46c1.31,0 2.6-0.53 3.53-1.46 0.93-0.94 1.47-2.22 1.47-3.54s-0.54-2.6-1.47-3.53c-0.93-0.94-2.22-1.47-3.53-1.47z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m396.436,199.542c-1.32,0-2.61,0.54-3.54,1.47s-1.46,2.21-1.46,3.53 0.53,2.6 1.46,3.54c0.93,0.93 2.22,1.46 3.54,1.46 1.31,0 2.6-0.53 3.53-1.46 0.93-0.93 1.47-2.22 1.47-3.54s-0.54-2.61-1.47-3.53c-0.93-0.93-2.22-1.47-3.53-1.47z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m412.436,199.542c-1.32,0-2.61,0.54-3.54,1.47-0.93,0.92-1.46,2.21-1.46,3.53s0.53,2.61 1.46,3.54 2.22,1.46 3.54,1.46c1.31,0 2.6-0.53 3.53-1.46 0.93-0.93 1.47-2.22 1.47-3.54s-0.54-2.61-1.47-3.53c-0.93-0.93-2.22-1.47-3.53-1.47z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m283.236,294.509h-235.334c-4.142,0-7.5,3.358-7.5,7.5v96.667c0,4.142 3.358,7.5 7.5,7.5h235.333c4.142,0 7.5-3.358 7.5-7.5v-96.667c0.001-4.142-3.357-7.5-7.499-7.5zm-7.5,96.667h-220.334v-81.667h220.333v81.667z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m329.82,307.176c-17.001,0-30.833,13.832-30.833,30.833v21.333c0,17.001 13.832,30.833 30.833,30.833s30.833-13.832 30.833-30.833v-21.333c1.13687e-13-17.001-13.831-30.833-30.833-30.833zm15.011,25.833h-10.011v-10.011c4.711,1.574 8.438,5.3 10.011,10.011zm-20.011-10.011v10.011h-10.012c1.575-4.711 5.301-8.437 10.012-10.011zm5,52.178c-8.73,0-15.833-7.103-15.833-15.833v-16.333h31.667v16.333c-0.001,8.73-7.103,15.833-15.834,15.833z"/>
<path style="stroke:black;fill:black;stroke-width:0.5;" d="m67.902,383.009h195.333c2.761,0 5-2.239 5-5v-55.333c0-2.761-2.239-5-5-5h-195.333c-2.761,0-5,2.239-5,5v55.333c0,2.762 2.239,5 5,5zm5-18.444h14.417v8.444h-14.417v-8.444zm45.235-18.445v8.445h-14.417v-8.445h14.417zm122.083,0v8.445h-14.417v-8.445h14.417zm-24.416,0v8.445h-14.417v-8.445h14.417zm-24.417,0v8.445h-14.417v-8.445h14.417zm-24.417,0v8.445h-14.417v-8.445h14.417zm-24.417,0v8.445h-14.417v-8.445h14.417zm-30.818,18.445v8.444h-14.416v-8.444h14.416zm10,0h14.417v8.444h-14.417v-8.444zm24.417,0h14.417v8.444h-14.417v-8.444zm24.417,0h14.417v8.444h-14.417v-8.444zm24.417,0h14.417v8.444h-14.417v-8.444zm24.416,0h14.417v8.444h-14.417v-8.444zm30.818-18.445h8.016v8.445h-8.016v-8.445zm-30.818-10v-8.444h14.417v8.444h-14.417zm-10,0h-14.417v-8.444h14.417v8.444zm-24.416,0h-14.417v-8.444h14.417v8.444zm-24.417,0h-14.417v-8.444h14.417v8.444zm-24.417,0h-14.417v-8.444h14.417v8.444zm-24.417,0h-14.416v-8.444h14.417v8.444zm-18.016,10v8.445h-20.818v-8.445h20.818zm150.099,26.889v-8.444h14.417v8.444h-14.417zm14.417-36.889h-14.417v-8.444h14.417v8.444zm-170.917-8.444v8.444h-14.417v-8.444h14.417z"/>
</g>
</svg>
</td>
<td class="text-center">
<svg width="35%" height="35%" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:black;fill:black;stroke-width:0.5;" d="M53.707,41.526c2.113-4.032,3.234-8.57,3.234-13.151C56.941,12.729,44.212,0,28.566,0S0.191,12.729,0.191,28.375
S12.919,56.75,28.566,56.75c4.376,0,8.56-0.976,12.452-2.882l2.699,2.699c0.365,0.364,0.851,0.564,1.367,0.564
s1.002-0.2,1.367-0.565l9.79-9.791c0.364-0.364,0.565-0.85,0.565-1.367c0-0.518-0.201-1.003-0.565-1.367L53.707,41.526z
M49.056,36.91c1.683-0.519,3.349-1.103,4.99-1.748c-0.447,1.685-1.063,3.32-1.833,4.881L49.056,36.91z M48.06,26.289
c-0.21-0.508-0.729-0.812-1.39-0.812h-6.71c-0.081-1.851-0.228-3.694-0.454-5.522c5.067,0.84,10.076,2.249,14.938,4.264
c0.056,0.023,0.114,0.022,0.172,0.034c0.212,1.344,0.324,2.72,0.324,4.122c0,1.503-0.138,2.999-0.391,4.474
c-0.035,0.01-0.071,0.006-0.105,0.02c-2.275,0.942-4.626,1.767-6.988,2.454L43.8,31.695l3.851-3.85
C48.118,27.378,48.27,26.797,48.06,26.289z M25.153,27.411v10.508c-1.84-0.093-3.67-0.253-5.486-0.493
c-0.792-5.905-0.791-11.873,0.002-17.778c5.904-0.793,11.871-0.794,17.776-0.002c0.255,1.93,0.425,3.875,0.514,5.833H27.086
C26.02,25.477,25.153,26.344,25.153,27.411z M2.578,32.848c-0.25-1.455-0.387-2.948-0.387-4.473c0-1.402,0.112-2.779,0.324-4.122
c0.057-0.013,0.116-0.01,0.172-0.034c4.859-2.013,9.864-3.421,14.928-4.262c-0.718,5.702-0.718,11.457-0.002,17.159
c-5.109-0.837-10.105-2.25-14.926-4.247C2.651,32.854,2.614,32.858,2.578,32.848z M54.148,21.961
c-4.876-1.929-9.882-3.297-14.946-4.089c-0.796-5.146-2.168-10.182-4.107-15.052C44.44,5.208,51.801,12.601,54.148,21.961z
M32.83,2.35c0.007,0.106,0.019,0.212,0.062,0.315c1.997,4.822,3.412,9.818,4.249,14.926c-5.703-0.717-11.458-0.716-17.161,0.002
c0.841-5.063,2.249-10.068,4.262-14.927c0.043-0.103,0.055-0.21,0.062-0.315C25.691,2.123,27.114,2,28.566,2
S31.441,2.123,32.83,2.35z M22.038,2.819c-1.955,4.911-3.339,9.955-4.139,15.058c-5.054,0.793-10.05,2.159-14.916,4.084
C5.331,12.6,12.693,5.207,22.038,2.819z M3.082,35.168c4.795,1.887,9.749,3.229,14.811,4.012c0.779,4.983,2.119,9.91,3.999,14.713
C12.743,51.498,5.519,44.301,3.082,35.168z M24.227,54.387c-2.007-4.853-3.412-9.85-4.25-14.906c1.715,0.212,3.441,0.355,5.176,0.44
v7.074c0,1.018,0.664,1.482,1.28,1.482c0.268,0,0.672-0.087,1.087-0.502l3.756-3.85l3.894,3.894c-0.65,2.157-1.409,4.3-2.266,6.372
c-1.42,0.234-2.866,0.358-4.337,0.358C27.088,54.75,25.639,54.622,24.227,54.387z M35.236,53.894
c0.552-1.411,1.059-2.842,1.519-4.289l2.762,2.762C38.127,53.004,36.699,53.513,35.236,53.894z M45.084,55.106L32.69,42.711
c-0.364-0.365-0.85-0.565-1.367-0.565s-1.003,0.201-1.367,0.565l-2.808,2.808l-0.062-18.042l18.103,0l-2.804,2.804
c-0.752,0.753-0.752,1.979,0.001,2.733l12.441,12.347L45.084,55.106z"/>
</svg>
</td>
</tr>
<tr>
<td class="text-center pb-4"><input class="mt-4" type="file" id="pathFileImport" style="color:black"></td>
<td class="text-center pb-4"><input class="mt-4" type="text" id="urlFileImport" style="width:100%" placeholder="URL File. Example: http://webpage.com/photo.png"></td>
</tr>
<tr>
<td class="text-center pb-4" >
<button mouseUp="importFromLocalDisk" id="btnImportLocalDisk" type="button" class="x"> Import </button>
<img id="btnImportLocalDiskPreload" style="display:none;" src="https://artdraw.org/svg/images/preload2.gif">
</td>
<td class="text-center pb-4">
<button mouseUp="importFromURL" id="btnImportUrl" type="button" class="x"> Import </button>
<img id="btnImportUrlPreload" style="display:none;" src="https://artdraw.org/svg/images/preload2.gif">
</td>
</tr>
</table>
</div>
<div class="modal-footer text-right">
<p>You can import any type of image: <b>SVG</b> JPG, JPEG, PNG, GIF, BMP, WEBP, BASE64...</p>
<p>Tip: For best results, first download the image to your computer and then import it.</p>
</div>
</div>
</div>
<div id="infoPanel" class="card card.toggle bgdark" style="position:absolute;width:200px;right:0;top:3px;padding:0;">
<div id="xinfoPanelHeader" class="px-4 py-2 bgLight">
<span class="unselect">Selection</span><div mouseUp="toggleInfoPanelClick" id="toggleInfoPanel" class="icon play-down float-right"></div>
</div>
<div class="card-body p-4">
<table class="w-100 mb-2">
<tbody>
<tr>
<td class="p-1" colspan="2"><input id="propSelName" class="" type="text" style="width:170px;" originalid="path-40127227" disabled=""></td>
</tr>
<tr>
<td class="p-1 text-center bold" colspan="2"><span class="unselect cl--txc">Position</span></td>
</tr>
<tr>
<td class="p-1"><span class="unselect cl--txc">X: </span><input id="propSelX" class="text-center" valu="0" type="text" style="width:64px;" disabled=""></td>
<td class="p-1"><span class="unselect cl--txc">Y: </span><input id="propSelY" class="text-center" type="text" style="width:64px;" disabled=""></td>
</tr>
<tr r="">
<td class="p-1 text-center bold" colspan="2"><span class="unselect cl--txc">Size</span></td>
</tr>
<tr>
<td class="p-1"><span class="unselect cl--txc">W: </span><input id="propSelW" class="text-center" type="text" style="width:64px;" disabled=""></td>
<td class="p-1"><span class="unselect cl--txc">H: </span><input id="propSelHxx" class="text-center" type="text" style="width:64px;" disabled=""></td>
</tr>
<tr>
<td class="text-center pt-2" colspan="2"><button id="btnApplyTransform" mouseUp="btnApplyTransformClick" type="button" class="x"> Apply </button></td>
</tr>
</tbody>
</table>
<div id="compatibleTools">
<ul>
<li mouseUp="MCKopenRotateEditor" id="btnRotateSel" class="features-item btnTool draft" title="Rotate & Duplicate Selection">
<svg class="svgIcon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="fill:var(--text-color);stroke: var(--text-color);stroke-width: 1;"d="M17.8 21H22v1h-6v-6h1v4.508a9.861 9.861 0 1 0-5 1.373v.837A10.748 10.748 0 1 1 17.8 21zM11 11v2h2v-2z"/>
</svg>
</li>
<li id="btnEditNodes" class="features-item btnTool draft" title="Bezier Edit Nodes">
<svg class="svgIcon" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="fill:var(--text-color);stroke: var(--text-color);stroke-width: 7;" d="M279.6 112.5a20.5 20.5 0 1 0-19.2-27.3H184V64.8c0-3.8-3-6.8-6.8-6.8h-54.5c-3.8 0-6.9 3-6.9 6.8v20.4H39.7a20.5 20.5 0 1 0 0 13.7h25.8A118.5 118.5 0 0 0 6.8 201.2a6.8 6.8 0 1 0 13.7 0c0-55.5 43.7-102.3 95.4-102.3v20.4c0 3.8 3 6.9 6.9 6.9h54.5c3.8 0 6.8-3 6.8-6.9V99c51.8 0 95.5 46.8 95.5 102.3a6.8 6.8 0 1 0 13.7 0c0-43.7-24.1-82.6-58.7-102.3h25.8c2.8 8 10.3 13.6 19.2 13.6zM20.5 99a6.8 6.8 0 1 1 0-13.7 6.8 6.8 0 0 1 0 13.7zm150 13.6h-41V71.6h41v41zm109.1-27.3a6.8 6.8 0 1 1 0 13.7 6.8 6.8 0 0 1 0-13.7z"></path>
<path class="svgss svgff" style="fill:var(--text-color);stroke: var(--text-color);stroke-width: 7;" d="M156.3 157.5a6.8 6.8 0 0 0-12.5 0l-34 75a6.8 6.8 0 0 0 9.7 8.6l30.5-18.3 30.6 18.3a6.8 6.8 0 0 0 3.7 1 6.8 6.8 0 0 0 5.5-10.8l-33.5-73.8zm-2.8 51.5a6.8 6.8 0 0 0-7 0l-15.3 9.2 18.8-41.4 18.9 41.4-15.4-9.2z"></path>
</svg>
</li>
<li mouseUp="MCKbtnRoundClick" id="btnRound" class="features-item btnTool draft" title="Border Round">
<svg class="svgIcon" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:0.5;stroke:var(--text-color);fill:none;" d="M 0.253,0.312 H 4.707 C 6.233,0.343 7.07,1.119 7.07,2.519 V 7.031 H 3.578 C 3.5,4.372 2.539,4.211 0.253,4.139 Z "></path>
</svg>
</li>
<li mouseUp="MCKbtnAlignTClick" id="btnAlignT" class="features-item btnTool draft" title="Align Tool">
<svg class="svgIcon" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke-width:0.5;stroke:var(--text-color);fill:none;" d="M 0.332,0.351 H 7.051 V 7.09 H 0.332 Z m 2.011,3.594 3.457,0.039 M 3.738,5.283 3.723,1.826 "></path>
</svg>
</li>
<li mouseUp="MCKbtnBooleanClick" id="btnBoolean" class="features-item btnTool draft" title="Boolean Tool">
<svg class="svgIcon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path class="svgff" style="stroke:none;fill:var(--text-color);stroke-width:0;" d="M28,10H22V4a2.0025,2.0025,0,0,0-2-2H4A2.0025,2.0025,0,0,0,2,4V20a2.0025,2.0025,0,0,0,2,2h6v6a2.0025,2.0025,0,0,0,2,2H28a2.0025,2.0025,0,0,0,2-2V12A2.0025,2.0025,0,0,0,28,10ZM4,20V4H20v6H12a2.0025,2.0025,0,0,0-2,2v8Zm8,8V22h8a2.0025,2.0025,0,0,0,2-2V12h6V28Z"></path>
<rect class="svgff" style="stroke:none;fill:var(--text-color);stroke-width:0;" x="10" y="10" width="10" height="10"></rect>
</svg>
</li>
<li mouseUp="MCKbtnOutlClick" id="btnOutl" class="features-item btnTool draft" title="Border Outline">
<svg class="svgIcon" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<rect class="svgff" style="stroke:none;fill:var(--text-color);stroke-width: 0;" width="4.5474348" height="4.7926979" x="1.4847825" y="1.3028588"></rect>
<rect class="svgss" style="stroke:var(--text-color);fill:none;stroke-width:0.5;stroke-dasharray:1,1;" width="7.1585774" height="7.1781106" x="0.13442433" y="0.10107933"></rect>
</svg>
</li>
<li mouseUp="MCKbtnTraceImageClick" id="btnTraceImage" class="features-item btnTool draft" title="Trace Image to Vectors">
<svg class="svgIcon" viewBox="-2 0 62 58" xmlns="http://www.w3.org/2000/svg">
<path class="svgss" style="stroke:var(--text-color);fill:none;stroke-width: 1.75;" d="M52.276,30.239c-1.128-1.127-3.092-1.127-4.221,0L32.664,45.63l-2.121,7.779l-0.519,0.519 c-0.388,0.388-0.389,1.014-0.006,1.405l-0.005,0.02l0.019-0.005c0.194,0.191,0.446,0.288,0.699,0.288 c0.256,0,0.512-0.098,0.707-0.293l0.52-0.52l7.778-2.121l15.39-15.391c1.164-1.164,1.164-3.058,0-4.222L52.276,30.239z M34.973,46.15l10.243-10.243l4.243,4.243L39.216,50.393L34.973,46.15z M34.07,48.075l3.22,3.22l-4.428,1.208L34.07,48.075z M53.711,35.896l-2.839,2.839l-4.243-4.242l2.839-2.839c0.373-0.373,1.022-0.372,1.394-0.001l2.85,2.85 C54.096,34.887,54.096,35.513,53.711,35.896z"/>
<path class="svgss" style="stroke:var(--text-color);fill:none;stroke-width: 3;" d="M57,2.365H1c-0.552,0-1,0.447-1,1v44c0,0.553,0.448,1,1,1h27.808l1.171-4.293l15.955-15.954 c0.745-0.745,1.654-1.264,2.643-1.535l-8.513-7.804l-9.181,10.054l4.807,4.807c0.391,0.391,0.391,1.023,0,1.414 s-1.023,0.391-1.414,0L23.974,24.754L7.661,39.116c-0.19,0.167-0.426,0.249-0.66,0.249c-0.277,0-0.553-0.114-0.751-0.339 c-0.365-0.415-0.325-1.047,0.09-1.412l17.017-14.982c0.396-0.348,0.994-0.329,1.368,0.044l4.743,4.743l9.794-10.727 c0.179-0.196,0.429-0.313,0.694-0.325c0.264-0.006,0.524,0.083,0.72,0.262l10.779,9.88c1.105,0.242,2.122,0.79,2.942,1.609 l2.851,2.851c0.284,0.284,0.535,0.592,0.753,0.918V3.365C58,2.813,57.552,2.365,57,2.365z M16,21.503 c-3.071,0-5.569-2.498-5.569-5.568c0-3.071,2.498-5.569,5.569-5.569s5.569,2.498,5.569,5.569 C21.569,19.005,19.071,21.503,16,21.503z"/>
</svg>
</li>
<li mouseUp="MCKclickBotonManager" id="btnColorManager" class="features-item btnTool draft" title="Color Manager">
<svg class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#F0C419;" d="M300.138,344.276c0,82.882-67.187,150.069-150.069,150.069S0,427.158,0,344.276
s67.187-150.069,150.069-150.069S300.138,261.394,300.138,344.276"/>
<path style="fill:#E64C3C;" d="M406.069,167.724c0,82.882-67.187,150.069-150.069,150.069s-150.069-67.187-150.069-150.069
S173.118,17.655,256,17.655S406.069,84.842,406.069,167.724"/>
<path style="fill:#13A085;" d="M512,344.276c0,82.882-67.187,150.069-150.069,150.069s-150.069-67.187-150.069-150.069
s67.187-150.069,150.069-150.069S512,261.394,512,344.276"/>
</svg>
</li>
<li mouseUp="MCKopenClipMaster" id="btnToClip" class="features-item btnTool draft" title="Clip Mask Tool">
<svg class="svgIcon" viewBox="0 0 490 490" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="fill:var(--text-color);stroke-width: 20;" d="M329.219,91.875c-4.228,0-7.656,3.428-7.656,7.656v298.595c0,42.216-34.345,76.562-76.562,76.562 s-76.562-34.346-76.562-76.562V68.907c0-29.552,24.042-53.594,53.593-53.594s53.593,24.042,53.593,53.594v283.28 c0,16.887-13.738,30.625-30.625,30.625c-16.887,0-30.625-13.739-30.625-30.625V99.531c0-4.228-3.427-7.656-7.656-7.656 c-4.228,0-7.656,3.428-7.656,7.656v252.657c0,25.33,20.607,45.937,45.937,45.937c25.33,0,45.937-20.607,45.937-45.937V68.907 C290.937,30.912,260.026,0,222.031,0s-68.906,30.912-68.906,68.907v329.218C153.125,448.785,194.34,490,245,490 c50.66,0,91.875-41.215,91.875-91.875V99.531C336.875,95.303,333.448,91.875,329.219,91.875z"/>
</svg>
</li>
<li mouseUp="openRoughPanel" id="btnRough" class="features-item btnTool draft" title="Rough Style">
<svg class="svgIcon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" d="M6.2 38.3c15.3-7.2 14.8-13 25.5-28.8m-20 33.1a81.1 81.1 0 0 1 26.4-31.5M11.8 73.4c15.8-18.6 29-40 48.6-67.6m-52.2 64C23.7 54 37.6 36.2 61.2 11m-46 87.3C39.9 78.5 62 51 93.6 7.2M16.6 92.8C29.1 67.2 54.1 42.9 91.4 7.9M44.8 94.4C60.6 78.9 77.2 56.4 103 19M39.5 95.2c25.2-24 43.9-51.4 65.4-74.7M69.2 94a266.8 266.8 0 0 1 37.6-44.2m-41 43.4c9.6-6.6 18.5-16 40.3-42.8"></path>
<path class="svgss svgff" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 1;" d="M12.4 12.6c23 3 52.8-3.2 79-6m-80.9 4.3c26.7.3 59.7-1.2 80.3 1.2m-2.6-5.8c4.5 27.3 6.8 53.3 7 80.6M91 10.3c3.3 22.6 1.4 43.1-.2 78m-3.5 1c-27.7-1-64.7 1.3-77-2.8M91 89C71.2 90.2 54.8 91.6 8.5 92m6-.7c-3.8-21.4-7.5-46.9.1-82.8m-7 83.2c3.2-18.3 3.7-37 3.4-83.3"></path>
</svg>
</li>
<li mouseUp="MCKopenWavesEditor" id="btnWaves" class="features-item btnTool draft" title="Create Waves">
<svg class="svgIcon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path class="svgss svgff" style="fill:var(--text-color);stroke-width: 1;" d="M31,5c-1.705,0-2.473,0.759-3.033,1.313c-0.463,0.459-0.743,0.735-1.626,0.735 c-0.946,0-1.375-0.339-1.967-0.808C23.675,5.688,22.807,5,21.165,5c-1.641,0-2.51,0.688-3.207,1.241 c-0.592,0.469-1.02,0.808-1.965,0.808c-0.944,0-1.371-0.339-1.963-0.808C13.332,5.688,12.464,5,10.824,5 C9.183,5,8.315,5.688,7.617,6.241C7.025,6.71,6.597,7.049,5.653,7.049c-0.881,0-1.16-0.277-1.622-0.735C3.47,5.759,2.704,5,1,5 C0.448,5,0,5.448,0,6v21c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1V6C32,5.448,31.552,5,31,5z M31,27H1v-8.5 c1.074,0,1.59,0.413,2.187,0.891c0.649,0.52,1.386,1.109,2.811,1.109c1.426,0,2.162-0.589,2.812-1.11 c0.597-0.478,1.112-0.89,2.187-0.89c1.073,0,1.589,0.413,2.186,0.89c0.649,0.521,1.386,1.11,2.811,1.11 c1.426,0,2.162-0.589,2.812-1.109c0.597-0.478,1.113-0.891,2.188-0.891c1.076,0,1.592,0.413,2.189,0.891 c0.65,0.52,1.389,1.109,2.814,1.109s2.164-0.589,2.814-1.109C29.408,18.913,29.924,18.5,31,18.5V27z M31,17.5 c-1.426,0-2.164,0.589-2.814,1.109c-0.598,0.478-1.113,0.891-2.189,0.891s-1.592-0.413-2.189-0.891 c-0.65-0.52-1.389-1.109-2.814-1.109s-2.162,0.589-2.812,1.109c-0.597,0.478-1.113,0.891-2.188,0.891 c-1.073,0-1.589-0.413-2.186-0.89c-0.649-0.521-1.386-1.11-2.811-1.11s-2.161,0.589-2.812,1.109 C7.588,19.087,7.072,19.5,5.997,19.5c-1.073,0-1.589-0.413-2.186-0.89C3.162,18.09,2.425,17.5,1,17.5v-5 c1.074,0,1.59,0.413,2.187,0.891c0.649,0.52,1.386,1.109,2.811,1.109c1.426,0,2.162-0.589,2.812-1.11 c0.597-0.478,1.112-0.89,2.187-0.89c1.073,0,1.589,0.413,2.186,0.89c0.649,0.521,1.386,1.11,2.811,1.11 c1.426,0,2.162-0.589,2.812-1.109c0.597-0.478,1.113-0.891,2.188-0.891c1.076,0,1.592,0.413,2.189,0.891 c0.65,0.52,1.389,1.109,2.814,1.109s2.164-0.589,2.814-1.109C29.408,12.913,29.924,12.5,31,12.5V17.5z M31,11.5 c-1.426,0-2.164,0.589-2.814,1.109c-0.598,0.478-1.113,0.891-2.189,0.891s-1.592-0.413-2.189-0.891 c-0.65-0.52-1.389-1.109-2.814-1.109s-2.162,0.589-2.812,1.109c-0.597,0.478-1.113,0.891-2.188,0.891 c-1.073,0-1.589-0.413-2.186-0.89c-0.649-0.521-1.386-1.11-2.811-1.11s-2.161,0.589-2.812,1.109 C7.588,13.087,7.072,13.5,5.997,13.5c-1.073,0-1.589-0.413-2.186-0.89C3.162,12.09,2.425,11.5,1,11.5V6 c2.585,0,2.068,2.049,4.653,2.049C8.238,8.049,8.238,6,10.824,6c2.584,0,2.584,2.049,5.168,2.049C18.578,8.049,18.578,6,21.165,6 c2.588,0,2.588,2.049,5.176,2.049S28.412,6,31,6V11.5z"/>
</svg>
</li>
<li mouseUp="MCKopenEffectsEditor" id="btnFx" class="features-item btnTool draft" title="Filter Effects">
<svg class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-width:10;stroke:var(--text-color);fill:var(--text-color);" d="M454.32,219.727l-38.766-51.947l20.815-61.385c2.046-6.032,0.489-12.704-4.015-17.208 c-4.504-4.504-11.175-6.061-17.208-4.015l-61.384,20.815l-51.949-38.766c-5.103-3.81-11.929-4.392-17.605-1.499 c-5.676,2.893-9.217,8.755-9.136,15.125l0.829,64.815l-52.923,37.426c-5.201,3.678-7.863,9.989-6.867,16.282 c0.996,6.291,5.479,11.471,11.561,13.363l43.843,13.629L14.443,483.432c-6.535,6.534-6.535,17.131,0,23.666s17.131,6.535,23.666,0 l257.072-257.073l13.629,43.844c1.891,6.082,7.071,10.565,13.363,11.561c0.876,0.138,1.75,0.206,2.622,0.206 c5.375,0,10.494-2.595,13.66-7.072l37.426-52.923l64.815,0.828c0.071,0.001,0.143,0.001,0.214,0.001 c6.287,0,12.051-3.525,14.909-9.137C458.711,231.658,458.129,224.833,454.32,219.727z M367.51,212.063 c-5.516-0.077-10.697,2.574-13.876,7.071l-22.929,32.421c-12.767-41.075-12.097-40.949-15.933-44.786 c-4.112-4.112-4.736-3.485-44.786-15.934l32.423-22.928c4.496-3.181,7.14-8.37,7.071-13.876l-0.508-39.706l31.825,23.748 c4.415,3.294,10.167,4.206,15.382,2.437l37.606-12.753l-12.753,37.607c-1.769,5.217-0.859,10.969,2.437,15.382l23.748,31.825 L367.51,212.063z"/>
<polygon style="stroke-width:20;stroke:var(--text-color);fill:none;" points="173.373,67.274 160.014,42.848 146.656,67.274 122.23,80.632 146.656,93.992 160.014,118.417 173.373,93.992 197.799,80.632"/>
<polygon style="stroke-width:20;stroke:var(--text-color);fill:var(--text-color);" points="362.946,384.489 352.14,364.731 341.335,384.489 321.577,395.294 341.335,406.1 352.14,425.856 362.946,406.1 382.703,395.294"/>
<polygon style="stroke-width:20;stroke:var(--text-color);fill:var(--text-color);" points="378.142,19.757 367.337,0 356.531,19.757 336.774,30.563 356.531,41.369 367.337,61.126 378.142,41.369 397.9,30.563"/>
<polygon style="stroke-width:20;stroke:var(--text-color);fill:var(--text-color);" points="490.635,142.513 484.167,130.689 477.701,142.513 465.876,148.979 477.701,155.446 484.167,167.27 490.635,155.446 502.458,148.979"/>
<polygon style="stroke-width:20;stroke:var(--text-color);fill:var(--text-color);" points="492.626,294.117 465.876,301.951 439.128,294.117 446.962,320.865 439.128,347.615 465.876,339.781 492.626,347.615 484.791,320.865"/>
</svg>
</li>
</ul>
</div>
</div>
</div>
<div id="frmImportShapes" class="frmModal" force="99">
<div class="modal-content w-60">
<div class="modal-header"><span class="closeModal">×</span><h2>Import Vector Images</h2></div>
<div id="importShapesList" class="modal-body">
<div class="tab">
<button class="tablinks active" mouseUp="showTabs" folder="shpBasic">Basic</button>
<button class="tablinks" mouseUp="showTabs" folder="shpAnimals">Animals</button>
<button class="tablinks" mouseUp="showTabs" folder="shpFood">Food</button>
<button class="tablinks" mouseUp="showTabs" folder="shpAvatars">Avatars</button>
<button class="tablinks" mouseUp="showTabs" folder="shpMedical">Medical</button>
<button class="tablinks" mouseUp="showTabs" folder="shpBuilding">Building</button>
<button class="tablinks" mouseUp="showTabs" folder="shpDesign">Design</button>
<button class="tablinks" mouseUp="showTabs" folder="shpFashion">Fashion</button>
<button class="tablinks" mouseUp="showTabs" folder="shpTravel">Travel</button>
<button class="tablinks" mouseUp="showTabs" folder="shpFrames">Frames</button>
<button class="tablinks" mouseUp="showTabs" folder="shpRibbons">Ribbons</button>
</div>
<div id="shpFrames" class="tabcontent active" style="height:360px;max-height:360px;overflow-x: hidden;">
</div>
</div>
<div class="modal-footer text-right">
<button mouseUp="MCKbtnImport1ShapeClick" id="btnImport1Shape" type="button" class="x"> Import </button>
</div>
</div>
</div>
<div id="frmTraceDialog" class="frmModal" force="1">
<div class="modal-content w-50 h-75">
<div class="modal-header"><span class="closeModal">×</span><h2>Trace Image to Vectors</h2></div>
<div id="containerFrameTrace" class="modal-body">
<div class="w-100">
<iframe id="frameTrace" class="w-100 h-100"></iframe>
</div>
</div>
</div>
</div>
<div id="frmConfigEditor" class="frmModal" force="0">
<div class="modal-content w-50 h-75">
<div class="modal-header"><span class="closeModal">×</span><h2>Editor Settings</h2></div>
<div id="containerEditorSettings" class="modal-body">
<div class="w-100">
<table>
<tr>
<td class="w-50">
<table style="color:var(--clBlack)" class="w-100">
<tr>
<td>Language</td>
</tr>
<tr>
<td>
<select id="cars" style="width:186px;">
<option value="en">English</option>
<option value="es">Español</option>
</select>
</td>
</tr>
<tr>
<td class="pt-2 pb-1 bold">Editor Color Scheme</td>
</tr>
<tr>
<td>
<select change="updateSkin" style="width:186px;" >
<option theme="#212529;#fafafb;#ff0066;#fafafb;#404040" value="0">Dark / Pink Red</option>
<option theme="#212529;#fafafb;#2483cc;#fafafb;#404040" value="1">Dark / Blue</option>
<option theme="#212529;#fafafb;#5eb715;#fafafb;#404040" value="2">Dark / Green</option>
<option theme="#212529;#fafafb;#c7c7c7;#2e2e33;#404040" value="3">Dark / Gray</option>
<option theme="#d6d6d6;#162b41;#2364a9;#fafafb;#404040" value="4">Light / Blue</option>
<option theme="#d6d6d6;#151c07;#60850f;#fafafb;#404040" value="5">Light / Green</option>
<option theme="#d6d6d6;#fafafb;#ff0066;#fafafb;#404040" value="6">Light / Blue</option>
<option theme="#d6d6d6;#fafafb;#ff0066;#fafafb;#404040" value="7">Light / Green</option>
</select>
</td>
</tr>
<tr>
<td class="pt-3">
<input id="background-color" change="updateSkin" type="color" class="mr-1" style="width:32px;">
<input id="text-color" change="updateSkin" type="color" class="mr-1" style="width:32px;">
<input id="background-hover" change="updateSkin" type="color" class="mr-1" style="width:32px;">
<input id="text-color-inv" change="updateSkin" type="color" class="mr-1" style="width:32px;">
<input id="border-color" change="updateSkin" type="color" style="width:32px;">
</td>
</tr>
</table>
</td>
<td class="w-50">
<table style="color:var(--clBlack)" class="w-100">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="frmGenericDialog" class="frmModal" force="1">
<div class="modal-content" style="width:460px">
<div class="modal-header"><span class="closeModal">×</span><h2>Edit Tool</h2></div>
<div class="modal-body bgBN">
<table class="w-100">
<tbody><tr>
<td style="position:relative;">
yy
</td>
<td>
xx
</td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
<table class="w-100">
<tbody><tr>
<td>
<button id="btnGenericDialogCancel" type="button" class="closeModal mr-4"> CANCEL </button>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div id="frmPublisWeb" class="frmModal" force="99">
<div class="modal-content w-33">
<div class="modal-header"><span class="closeModal">×</span><h2>Publish Image on the Web</h2></div>
<div id="divOpenDocument" class="modal-body">
<table class="w-100">
<tr>
<td class="text-center pb-4">
<table class="w-100">
<tr>
<td class="text-left clBlack bold">Image Name*</td>
<td><input class="mt-4" type="text" id="exportFileName" style="width:100%" placeholder="Title of the drawing to publish."></td>
</tr>
<tr>
<td class="text-left clBlack bold">Album Name</td>
<td><input class="mt-4" type="text" id="exportAlbum" style="width:100%" placeholder="Collection Title. Example: Birds Vectors"></td>
</tr>
<tr>
<td colspan="2">
<p class="text-left clBlack bold py-3">Image Description</p>
<textarea id="exportFileDesc" class="w-100" rows="6" placeholder="Write a brief description of the drawing."></textarea>
</td>
</tr>
<tr>
<td class="text-left clBlack bold">Label Tags</td>
<td><input class="mt-4" type="text" id="exportTags" style="width:100%" placeholder="Keywords separated by ; Example: animals;bird;crow;"></td>
</tr>
</table>
<input type="hidden" id="exportUID">
</td>
</tr>
<tr>
<td class="text-center pb-4" style="display:flex;align-items:center;justify-content:center;">
<button mouseUp="publishWeb" type="button" style="display:flex;"> Publish </button>
<p style="color:#ff0202;font-weight: bold;">You must sign in with your Google account.</p>
<img id="exportPreload" style="display:none;" src="https://artdraw.org/svg/images/preload2.gif">
</td>
</tr>
</table>
</div>
<div class="modal-footer text-right">
<p>The images that you publish on the web <b>ArtDraw</b> are public. <br>This means that anyone can view or download them.<br><b>You can edit or delete your images at any time.</b> </p>
</div>
</div>
</div>
<div id="frmUserLogin" class="frmModal" force="99">
<div class="modal-content w-33">
<div class="modal-header"><span class="closeModal">×</span><h2>Close Google Session</h2></div>
<div class="modal-body" style="display:flex;align-items:center;justify-content: center;">
<button mouseup="CloseGoogleSession" type="button" style="background:red!important;display:flex;">
<svg style="width:32px;height:32px;color: white;pointer-events: none;" viewBox="0 0 94 94" xmlns="http://www.w3.org/2000/svg">
<path style="fill:var(--text-color);" d="M89,0H5C2.239,0,0,2.239,0,5v84c0,2.761,2.239,5,5,5h84c2.762,0,5-2.239,5-5V5C94,2.239,91.762,0,89,0z M31.088,85.553 c-14.553,0-21.571-6.935-21.571-14.381c0-3.617,1.803-8.742,7.724-12.264c6.219-3.822,14.652-4.322,19.17-4.633 C35,52.465,33.4,50.557,33.4,47.441c0-1.708,0.502-2.713,0.999-3.922c-1.105,0.103-2.204,0.202-3.208,0.202 c-10.634,0-16.654-7.95-16.654-15.792c0-4.62,2.104-9.752,6.418-13.473c5.724-4.726,13.541-6.008,18.966-6.008h19.771l-6.525,4.099 h-6.217c2.307,1.909,7.117,5.931,7.117,13.578c0,7.436-4.209,10.964-8.421,14.28c-1.306,1.304-2.813,2.712-2.813,4.929 c0,2.207,1.508,3.413,2.608,4.325l3.617,2.809c4.414,3.72,8.428,7.138,8.428,14.083C57.482,76.005,48.346,85.553,31.088,85.553z M84.482,45.77H74.395v10.117H69.43V45.77H59.391v-5.02H69.43V30.695h4.965V40.75h10.088V45.77z"/>
<path style="fill:var(--text-color);" d="M45.24,30.749c0-7.243-4.317-18.503-12.64-18.503c-2.616,0-5.42,1.307-7.029,3.32c-1.707,2.114-2.204,4.821-2.204,7.443 c0,6.734,3.911,17.894,12.544,17.894c2.507,0,5.207-1.2,6.821-2.811C45.04,35.771,45.24,32.56,45.24,30.749z"/>
<path style="fill:var(--text-color);" d="M39.82,57.195c-0.8-0.102-1.302-0.102-2.305-0.102c-0.904,0-6.324,0.197-10.537,1.615 c-2.208,0.799-8.627,3.214-8.627,10.354c0,7.141,6.922,12.276,17.658,12.276c9.635,0,14.755-4.637,14.755-10.862 C50.764,65.334,47.451,62.627,39.82,57.195z"/>
</svg>
<span style="font-size:32;display:flex;align-items:center;padding-left:12px;pointer-events:none;">Logout</span>
</button>
</div>
</div>
</div>
<div id="frmMasterUpload" class="frmModal" force="1">
<div class="modal-content w-33">
<div class="modal-header"><span class="closeModal">×</span><h2>Publish Multiple SVG</h2></div>
<div id="divOpenDocument" class="modal-body">
<table class="w-100">
<tr>
<td class="text-center pb-4">
<p class="text-left clBlack bold">Album</p>
<input class="mt-4" type="text" id="masupAlbum" style="width:100%">
<p class="text-left clBlack bold py-3" >Tag EN</p>
<textarea id="masupTagen" class="w-100" rows="3"></textarea>
<p class="text-left clBlack bold py-3">Tag ES</p>
<textarea id="masupTages" class="w-100" rows="3"></textarea>
</td>
</tr>
<tr>
<td class="text-center pb-4">
<input type="file" id="multiplesvg" multiple style="float:left;color:black;">
<button mouseUp="masterUpload" type="button" class="x"> Import </button>
</td>
</tr>
</table>
</div>
<div class="modal-footer text-right">
<p id="masupInfo">Mode Admin</p>
</div>
</div>
</div>
<div id="xxxxxxx" class="frmModal" force="99">
<div class="modal-content w-60">
<div class="modal-header"><span class="closeModal">×</span><h2>SetUp Cut Job</h2></div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<div id="frmExportPNG" class="frmModal" force="99">
<div class="modal-content w-33">
<div class="modal-header"><span class="closeModal">×</span><h2>Export Image PNG</h2></div>
<div class="modal-body">
<table class="w-100 clBlack">
<tr>
<td class="font-size-2 bold py-2 text-center">Export ALL Document</td>
<td class="font-size-2 bold py-2 text-center">Export ONLY Selection</td>
</tr>
<tr>
<td style="padding-right:6px;">
<table class="w-100 mt-3">
<tr>
<td colspan="2" style="background-color:var(--background-hover);color:var(--text-color-inv );" class="text-center py-2 bold">Image Size</td>
</tr>
<tr>
<td class="clBlack pt-3 text-left pl-4">Width</td>
<td class="clBlack pt-3 text-left pl-4">Height</td>
</tr>
<tr>
<td class="clBlack"><input type="number" change="updateExportSize" style="width:64px;" id="exportALLw"><span style="margin-left: 2px;" class="clBlack bold">px</span></td>
<td class="clBlack"><input type="number" change="updateExportSize" style="width:64px;" id="exportALLh"><span style="margin-left: 2px;" class="clBlack bold">px</span></td>
</tr>
<tr>
<td colspan="2" style="position:relative;" class="clBlack py-3">
<div style="display:grid;grid-template-columns:30px 1fr;grid-template-rows:24px;">
<div style="grid-area: 1 / 1 / 2 / 2;"><input id="exportALLratio" change="updateExportSize" class="previewRound" type="checkbox" checked=""></div>
<div style="grid-area: 1 / 2 / 2 / 3;display:grid;align-items:center;padding-left:2px;"><span>Preserve Aspect Ratio</span></div>
</div>
</td>
</tr>
</table>
</td>
<td style="padding-left:6px;">
<table class="w-100 mt-3">
<tr>
<td colspan="2" style="background-color:var(--background-hover);color:var(--text-color-inv );" class="text-center py-2 bold">Image Size</td>
</tr>
<tr>
<td class="clBlack pt-3 text-center">Width</td>
<td class="clBlack pt-3 text-center">Height</td>
</tr>
<tr>
<td class="text-right"><input type="number" change="updateExportSize" style="width:64px;" id="exportONLYw"><span style="margin-left: 2px;" class="clBlack bold">px</span></td>
<td class="text-right"><input type="number" change="updateExportSize" style="width:64px;" id="exportONLYh"><span style="margin-left: 2px;" class="clBlack bold">px</span></td>
</tr>
<tr>
<td colspan="2" style="position:relative;" class="clBlack py-3 text-right">
<div style="display:grid;grid-template-columns:1fr 30px;grid-template-rows:24px;">
<div style="grid-area: 1 / 1 / 2 / 2;display:grid;align-items:center;padding-right:2px;"><span>Preserve Aspect Ratio</span></div>
<div style="grid-area: 1 / 2 / 2 / 3;"><input id="exportONLYratio" change="updateExportSize" class="previewRound" type="checkbox" checked=""></div>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="text-center py-2" style="min-height:50px;">
<img id="exportPreload" style="display:none;" src='https://artdraw.org/svg/images/preload2.gif'>
<button id="exportALLpng" mouseUp="MCKbtnExportPNG2" mode="ALL" type="button" class="mt-3"> Export Document </button></td>
<td class="text-center py-2"><button id="exportONLYpng" mouseUp="MCKbtnExportPNG2" mode="ONLY" type="button" class="mt-3"> Export Selection </button></td>
</tr>
</table>
</div>
<div class="modal-footer">
<table class="clBlack">
<tr>
<td class="text-center"><input id="exportTransparent" class="previewRound" type="checkbox" checked="" ></td>
<td class="pl-3">Transparent Background</td>
</tr>
<tr>
<td class="py-2"><input type="number" style="width:48px;" id="exportMargin" value="0" disabled></td>
<td class="pl-3">Margin Border</td>
</tr>
</table>
</div>
</div>
</div>
<div id="panelText" class="toolPanel bgdark" style="display:none">
<div class="px-4 py-2 bgLight"><span class="unselect">DRAW TEXT</span></div>
<div class="card-body border p-4">
<input id="font" type="text" style="display:none;" value="/fonts/Chivo-Regular.ttf" />
<button id="selectFontBtn" mouseUp="__showModal" class="modalOpen" idModal="frmSelectFont" type="button" class="btn btn-secondary btn-sm" style="width:178px;font-size:22px;line-height:14px;">Select Font</button>
<div class="mb-3">
<table class="w-100 my-2">
<tr>
<td colspan="2">Simple</td>
<td><input type="radio" change="MCKmodeDrawText" class="previewAlign" name="textMode" value="1" style="margin:3px;"></td>
<td colspan="2">Vector</td>
<td><input type="radio" change="MCKmodeDrawText" class="previewAlign" name="textMode" value="2" style="margin:3px;" checked></td>
</tr>
<tr id="textSimpleControls" style="display:none">
<td class="text-center"><input type="number" id="panelTextFontSize" value="16" style="width:42px;"></td>
<td mouseup="MCKtextAlignClick" rel-atr="start" class="text-center align features-item2 sel">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" d="M3 6H21M3 12H13M3 18H18"/>
</svg>
</td>
<td mouseup="MCKtextAlignClick" rel-atr="middle" class="text-center align features-item2">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" d="M3 6H21M7 12H17M5 18H19"/>
</svg>
</td>
<td mouseup="MCKtextAlignClick" rel-atr="end" class="text-center align features-item2">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" d="M3 6H21M11 12H21M6 18H21"/>
</svg>
</td>
<td id="drawTextBold" mouseup="MCKtextAlignClick" rel-atr="bold" class="text-center features-item2">
<svg class="svgIconTopMenu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="20" height="20" rx="2" style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;"></rect>
<path style="stroke:none;fill:var(--background-color);" d="M15.34,11.53a3.47,3.47,0,0,0,.66-2A3.5,3.5,0,0,0,12.5,6H8A1,1,0,0,0,8,8v8a1,1,0,0,0,0,2h5.5a3.5,3.5,0,0,0,1.84-6.47ZM12.5,8a1.5,1.5,0,0,1,0,3H10V8Zm1,8H10V13h3.5a1.5,1.5,0,0,1,0,3Z"/>
</svg>
</td>
<td id="drawtextItalic" mouseup="MCKtextAlignClick" rel-atr="italic" class="text-center features-item2">
<svg class="svgIconTopMenu" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path style="stroke:var(--text-color);fill:var(--text-color);stroke-width: 2;" d="M490.667,0H21.333C9.557,0,0,9.536,0,21.333v469.333C0,502.443,9.557,512,21.333,512h469.333 c11.797,0,21.333-9.557,21.333-21.333V21.333C512,9.536,502.464,0,490.667,0z M403.093,116.203l-21.333,42.667 c-3.755,7.488-11.264,11.797-19.115,11.797c-3.2,0-6.443-0.725-9.515-2.261c-10.539-5.269-14.805-18.069-9.536-28.629L349.483,128 H293.44l-73.131,256h14.357c11.797,0,21.333,9.536,21.333,21.333c0,11.776-9.536,21.333-21.333,21.333h-42.581h-0.064h-0.064 h-42.624c-11.776,0-21.333-9.557-21.333-21.333c0-11.797,9.557-21.333,21.333-21.333h26.581l73.131-256h-65.173l-15.445,30.869 c-5.291,10.539-18.091,14.827-28.629,9.536c-10.539-5.269-14.805-18.069-9.536-28.629l21.333-42.667 c3.627-7.211,11.008-11.776,19.072-11.776H384c7.403,0,14.251,3.819,18.155,10.112C406.059,101.739,406.4,109.589,403.093,116.203 z"/>
</svg>
</td>
</tr>
</table>
<textarea class="w-100" id="txt2path" placeholder="Enter Text..." rows="7"></textarea>
</div>
<div class="mb-3 text-center">
<button mouseUp="MCKdrawTextClick" id="drawText" type="button" class="btn btn-secondary btn-sm" style="display:none;">Draw Text</button>
<img id="preloadScriptOpenType" src="https://artdraw.org/svg/images/preload2.gif">
</div>
</div>
</div>
<div id="frmSelectFont" class="frmModal" force="99">
<div class="modal-content" style="width: 842px;">
<div class="modal-header"><span class="closeModal">×</span><h2>Font Selector</h2></div>
<div class="modal-body" style="height:260px;overflow-y:scroll;overflow-x:hidden;width: 840px;">
<div class="oneFont" mouseUp="fontSelect" font="AdventPro-Regular.ttf">
<div style="background-position: -0px -16px;"></div>
<span>AdventPro</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="AguafinaScript-Regular.ttf">
<div style="background-position: -250px -16px;"></div>
<span>AguafinaScript</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Akronim-Regular.ttf">
<div style="background-position: -500px -16px;"></div>
<span>Akronim</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Aladin-Regular.ttf">
<div style="background-position: -0px -80px;"></div>
<span>Aladin</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Aldrich-Regular.ttf">
<div style="background-position: -250px -80px;"></div>
<span>Aldrich</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Alef-Regular.ttf">
<div style="background-position: -500px -80px;"></div>
<span>Alef</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="AlegreyaSans-Regular.ttf">
<div style="background-position: -0px -144px;"></div>
<span>AlegreyaSans</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="AlexBrush-Regular.ttf">
<div style="background-position: -250px -144px;"></div>
<span>AlexBrush</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="AlfaSlabOne-Regular.ttf">
<div style="background-position: -500px -144px;"></div>
<span>AlfaSlabOne</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Alice-Regular.ttf">
<div style="background-position: -0px -208px;"></div>
<span>Alice</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Alike-Regular.ttf">
<div style="background-position: -250px -208px;"></div>
<span>Alike</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Allan-Regular.ttf">
<div style="background-position: -500px -208px;"></div>
<span>Allan</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Allerta-Regular.ttf">
<div style="background-position: -0px -272px;"></div>
<span>Allerta</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Allura-Regular.ttf">
<div style="background-position: -250px -272px;"></div>
<span>Allura</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Almendra-Regular.ttf">
<div style="background-position: -500px -272px;"></div>
<span>Almendra</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Amarante-Regular.ttf">
<div style="background-position: -0px -336px;"></div>
<span>Amarante</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Amaranth-Regular.ttf">
<div style="background-position: -250px -336px;"></div>
<span>Amaranth</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="AmaticSC-Regular.ttf">
<div style="background-position: -500px -336px;"></div>
<span>AmaticSC</span>
</div>
<div class="oneFont" mouseUp="fontSelect" font="Amiko-Regular.ttf">