-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (68 loc) · 12.1 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Enghearts Logo 256px x 256px</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
}
canvas {
image-rendering: pixelated;
}
</style>
</head>
<body>
<canvas id="canvas" width="256" height="256"></canvas>
</body>
<script>
const ctx = document.querySelector('canvas').getContext('2d');
// path 001 (s)
const path001 = new Path2D(
'm 244.02199,126.47386 c 0,3.07633 -1.13008,5.46204 -3.45303,7.21995 -2.26016,1.69512 -5.6504,2.57407 -10.04514,2.57407 -3.45303,0 -6.27822,-0.50225 -8.4756,-1.50677 -2.26016,-1.00451 -3.32746,-2.51129 -3.32746,-4.45754 0,-0.87895 0.18835,-1.63233 0.56504,-2.32294 0.37669,-0.62782 0.87894,-1.13008 1.44399,-1.50677 1.19286,0.6906 2.57406,1.31842 4.08084,1.88347 1.56956,0.50225 3.39024,0.81616 5.39927,0.81616 3.07633,0 4.58311,-0.87895 4.58311,-2.63685 0,-0.75339 -0.25113,-1.31842 -0.81618,-1.7579 -0.56504,-0.43947 -1.44398,-0.81617 -2.69963,-1.00452 l -2.63686,-0.62782 c -3.39023,-0.69061 -5.83874,-1.82068 -7.53385,-3.26467 -1.63235,-1.50678 -2.44851,-3.57859 -2.44851,-6.15266 0,-2.95076 1.19286,-5.2737 3.57859,-6.96883 2.32293,-1.7579 5.52482,-2.63684 9.54288,-2.63684 2.00904,0 3.82972,0.25113 5.52484,0.62781 1.63234,0.3767 2.88799,1.00452 3.8925,1.82069 0.94173,0.81617 1.44399,1.82069 1.44399,3.01355 0,0.81617 -0.18835,1.56955 -0.50226,2.19738 -0.37669,0.62781 -0.81617,1.13008 -1.31843,1.56955 -0.43947,-0.31392 -1.19286,-0.62782 -2.13459,-0.94174 -0.87895,-0.31391 -1.94625,-0.56503 -3.01354,-0.81616 -1.13008,-0.25113 -2.19738,-0.31392 -3.13911,-0.31392 -1.50678,0 -2.63686,0.18835 -3.51581,0.56505 -0.81617,0.43947 -1.25565,1.0673 -1.25565,1.88346 0,0.56504 0.25113,1.00452 0.69061,1.44399 0.50226,0.37669 1.31842,0.69061 2.57407,0.94174 l 2.51129,0.62782 c 3.76693,0.87895 6.40379,2.07181 8.03612,3.64136 1.63234,1.56956 2.44851,3.57859 2.44851,6.08988 z"'
);
// path 002 (Eng)
const path002 = new Path2D(
'm 12.342864,130.3155 v -27.46524 c 0,-1.53953 0.431069,-2.77115 1.354787,-3.694874 0.862138,-0.862137 2.093761,-1.293206 3.633294,-1.293206 h 20.321808 c 0.307905,0.369488 0.492649,0.862137 0.677392,1.477949 0.246326,0.615813 0.307906,1.293201 0.307906,2.032181 0,1.35478 -0.246324,2.2785 -0.862137,2.9559 -0.55423,0.61581 -1.354787,0.92372 -2.401668,0.92372 H 21.456887 v 7.20501 h 14.47159 c 0.246326,0.36948 0.431069,0.92371 0.677394,1.53952 0.184744,0.61582 0.307906,1.29321 0.307906,2.03219 0,1.2932 -0.307906,2.2785 -0.862137,2.89431 -0.615812,0.61581 -1.416369,0.92372 -2.401669,0.92372 H 21.456887 v 8.00556 h 16.503771 c 0.246325,0.36949 0.431069,0.92372 0.677393,1.53953 0.184744,0.67739 0.307907,1.35479 0.307907,2.09376 0,1.3548 -0.307907,2.27851 -0.923718,2.89432 -0.554233,0.61581 -1.354787,0.92371 -2.340087,0.92371 H 17.330945 c -1.539533,0 -2.771156,-0.43106 -3.633294,-1.35477 -0.923718,-0.86215 -1.354787,-2.09377 -1.354787,-3.63329 z m 31.89908,1.04687 V 112.2106 c 0,-1.04687 0.184743,-1.90901 0.615812,-2.52483 0.431068,-0.67739 1.108463,-1.2932 1.909019,-1.84743 1.354786,-0.92371 3.01748,-1.66269 5.049661,-2.2785 2.032181,-0.55424 4.310687,-0.86214 6.773935,-0.86214 4.43385,0 7.882399,0.98529 10.284067,2.9559 2.401669,1.97059 3.633293,4.74175 3.633293,8.37505 v 19.09018 c -0.431069,0.12316 -0.9853,0.18473 -1.724275,0.3079 -0.738974,0.12317 -1.53953,0.18475 -2.401668,0.18475 -1.724274,0 -3.01748,-0.30792 -3.818036,-0.92372 -0.800557,-0.61582 -1.231625,-1.72427 -1.231625,-3.32539 v -15.02582 c 0,-1.53953 -0.431069,-2.648 -1.293205,-3.38697 -0.923718,-0.6774 -2.093763,-1.04689 -3.510131,-1.04689 -1.046881,0 -1.970599,0.12318 -2.832737,0.36949 -0.862137,0.24634 -1.601113,0.61582 -2.340087,0.9853 v 21.86135 c -0.369488,0.12316 -0.9853,0.18473 -1.724275,0.3079 -0.738975,0.12317 -1.53953,0.18475 -2.401668,0.18475 -1.724275,0 -3.01748,-0.30792 -3.818036,-0.92372 -0.800556,-0.61582 -1.170044,-1.72427 -1.170044,-3.32539 z m 52.467213,1.35478 c -0.554232,0.30791 -1.231625,0.55424 -1.909019,0.73898 -1.231624,0.36949 -2.709574,0.55423 -4.49543,0.55423 -2.401668,0 -4.680173,-0.43106 -6.773936,-1.35478 -2.03218,-0.98531 -3.694874,-2.52484 -4.98808,-4.61859 -1.231624,-2.15535 -1.847437,-4.98808 -1.847437,-8.49822 0,-3.26381 0.677394,-5.97338 1.909018,-8.1903 1.293206,-2.21692 3.140643,-3.87962 5.48073,-4.98808 2.340087,-1.10846 5.049661,-1.66269 8.128723,-1.66269 2.216925,0 4.310687,0.3079 6.219705,0.86214 1.847439,0.61581 3.325389,1.23162 4.433849,1.97059 0.73897,0.49265 1.35478,1.04688 1.78585,1.78585 0.49266,0.6774 0.6774,1.47796 0.6774,2.52484 v 23.27771 c 0,2.89431 -0.61581,5.17282 -1.97061,7.02026 -1.35478,1.78585 -3.14063,3.14064 -5.419139,4.00278 -2.340087,0.86213 -4.864917,1.29321 -7.697653,1.29321 -2.155344,0 -4.064363,-0.18475 -5.665475,-0.55424 -1.662693,-0.36948 -2.955898,-0.86213 -3.818036,-1.41636 -1.416369,-0.92372 -2.093762,-2.21694 -2.093762,-3.81804 0,-0.86214 0.123162,-1.60112 0.49265,-2.3401 0.369486,-0.67739 0.800555,-1.17003 1.293206,-1.47794 1.108462,0.61581 2.401668,1.17005 3.941198,1.6627 1.47795,0.49264 3.079063,0.73898 4.803337,0.73898 2.278505,0 4.125943,-0.43107 5.48073,-1.29322 1.354787,-0.86213 2.032181,-2.21693 2.032181,-4.06436 z M 96.524413,125.6969 V 112.888 c -0.431068,-0.24633 -0.9853,-0.49265 -1.662693,-0.6774 -0.615813,-0.18473 -1.354787,-0.30791 -2.340087,-0.30791 -1.9706,0 -3.571712,0.61583 -4.864918,1.84745 -1.231625,1.23162 -1.847437,3.20222 -1.847437,5.78863 0,2.89433 0.554231,4.86493 1.785856,5.91179 1.170043,1.10847 2.586413,1.6627 4.372268,1.6627 1.354787,0 2.463249,-0.24632 3.386968,-0.73896 0.431069,-0.18476 0.800555,-0.43107 1.170043,-0.6774 z'
);
// path 003 (heart shape)
const path003 = new Path2D(
'm 162.20117,92.910784 c 11.88002,-21.696848 35.6399,-21.696848 47.5201,-10.848424 11.8804,10.848424 11.8804,32.54528 0,54.24213 -8.31609,16.27263 -29.70007,32.54526 -47.5201,43.39368 -17.82004,-10.84842 -39.20402,-27.12105 -47.52012,-43.39368 -11.87984,-21.69685 -11.87984,-43.393706 0,-54.24213 11.88022,-10.848424 35.64008,-10.848424 47.52012,10.848424 z'
);
// path 004 (heart)
const path004 = new Path2D(
'm 115.71934,129.21134 v -24.21672 c 0.24669,-0.0822 0.61673,-0.16446 1.1101,-0.24669 0.49339,-0.0822 1.02788,-0.12334 1.60349,-0.12334 1.19234,0 2.05575,0.20557 2.59024,0.61672 0.5345,0.41115 0.78119,1.15122 0.78119,2.26132 v 4.85157 c 0.41115,-0.16446 0.8223,-0.2878 1.27457,-0.45226 0.94564,-0.32892 1.97352,-0.49338 3.08362,-0.49338 2.59024,0 4.64599,0.65784 6.16725,2.01464 1.48014,1.31567 2.26132,3.28919 2.26132,5.96166 v 12.3345 c -0.2878,0.0822 -0.65783,0.12334 -1.15122,0.20557 -0.49338,0.0822 -1.02787,0.12334 -1.60348,0.12334 -1.15122,0 -2.01464,-0.20557 -2.54913,-0.61672 -0.5345,-0.41115 -0.8223,-1.15121 -0.8223,-2.22021 v -9.49756 c 0,-1.27456 -0.32892,-2.13798 -0.94564,-2.67247 -0.65784,-0.53449 -1.48015,-0.8223 -2.4669,-0.8223 -0.86342,0 -1.64461,0.16446 -2.34356,0.49338 -0.32892,0.16446 -0.61672,0.32892 -0.90453,0.49338 v 14.51359 c -0.24669,0.0822 -0.65784,0.12334 -1.15122,0.20557 -0.49338,0.0822 -1.02787,0.12334 -1.60349,0.12334 -1.15121,0 -2.01462,-0.20557 -2.54912,-0.61672 -0.5345,-0.41115 -0.78119,-1.15121 -0.78119,-2.22021 z m 27.71151,-4.76934 c 0.32892,1.069 0.90452,1.85018 1.72682,2.34356 1.02788,0.65785 2.26132,0.98676 3.70035,0.98676 1.15122,0 2.26133,-0.16446 3.24808,-0.49338 1.02788,-0.32892 1.85018,-0.65784 2.4669,-1.02787 0.41115,0.24668 0.74007,0.5756 0.98677,1.02787 0.2878,0.45227 0.41114,0.90453 0.41114,1.39791 0,0.8223 -0.32891,1.48014 -0.94565,2.05575 -0.65783,0.57561 -1.56236,0.98676 -2.67247,1.23344 -1.15121,0.28782 -2.42578,0.41116 -3.90592,0.41116 -2.13798,0 -4.02927,-0.37004 -5.67387,-1.19234 -1.68571,-0.78118 -3.00139,-1.97352 -3.98815,-3.577 -0.94565,-1.60348 -1.43903,-3.577 -1.43903,-5.96167 0,-1.76795 0.28781,-3.2892 0.86342,-4.56377 0.5345,-1.31567 1.27456,-2.34355 2.22021,-3.20696 0.94565,-0.8223 2.01463,-1.43903 3.20697,-1.85018 1.23345,-0.41115 2.4669,-0.61672 3.74146,-0.61672 1.89129,0 3.53589,0.37003 4.9338,1.1101 1.43902,0.74008 2.54912,1.76795 3.33032,3.08363 0.78118,1.27456 1.19232,2.79582 1.19232,4.48152 0,0.82231 -0.20557,1.48015 -0.69895,1.93241 -0.45226,0.41115 -1.11011,0.69896 -1.9324,0.82231 z m -0.37005,-4.11149 8.01743,-1.27457 c -0.0411,-0.78118 -0.37003,-1.48014 -0.98676,-2.13798 -0.61673,-0.65783 -1.48014,-0.98675 -2.67248,-0.98675 -1.23344,0 -2.26132,0.41115 -3.08362,1.27456 -0.74006,0.74007 -1.19234,1.80906 -1.27457,3.12474 z m 24.42231,-8.92195 c 2.83693,0 5.09826,0.61672 6.82508,1.76795 1.68572,1.19233 2.54913,3.0425 2.54913,5.55052 v 9.3331 c 0,0.69895 -0.20558,1.23344 -0.5345,1.68571 -0.37003,0.41115 -0.82229,0.78119 -1.35678,1.06899 -0.82231,0.49338 -1.85018,0.86341 -3.04252,1.15121 -1.23344,0.28782 -2.63136,0.45228 -4.19372,0.45228 -2.79582,0 -5.01603,-0.57562 -6.70174,-1.64461 -1.64461,-1.11011 -2.4669,-2.71358 -2.4669,-4.89268 0,-1.85017 0.5756,-3.2892 1.72683,-4.27596 1.15121,-1.02787 2.83693,-1.6446 5.13937,-1.85017 l 5.46829,-0.57561 v -0.49338 c 0,-0.94565 -0.37003,-1.60349 -1.06899,-2.01464 -0.74007,-0.41114 -1.76794,-0.61672 -3.12474,-0.61672 -1.02787,0 -2.05575,0.12335 -3.04251,0.37004 -1.02787,0.24668 -1.9324,0.53449 -2.71358,0.86341 -0.32892,-0.20558 -0.61673,-0.57561 -0.82231,-1.02787 -0.24669,-0.45227 -0.37003,-0.90453 -0.37003,-1.39792 0,-1.15121 0.65784,-1.97352 1.89129,-2.50801 0.78118,-0.32892 1.68571,-0.53449 2.7547,-0.69895 1.06899,-0.16446 2.09687,-0.24669 3.08363,-0.24669 z m 0.24669,16.44599 c 0.65784,0 1.27456,-0.0411 1.85017,-0.16446 0.61673,-0.12334 1.06899,-0.2878 1.35679,-0.45227 v -3.94703 l -3.45365,0.32892 c -0.94565,0.0411 -1.68572,0.24669 -2.22021,0.57561 -0.5345,0.32891 -0.82231,0.8223 -0.82231,1.48014 0,0.65784 0.28781,1.19233 0.7812,1.60348 0.53449,0.41115 1.35678,0.57561 2.50801,0.57561 z m 12.41672,1.35679 v -12.62229 c 0,-0.78119 0.16446,-1.39792 0.53449,-1.93241 0.41115,-0.53449 0.90453,-1.02787 1.56238,-1.43902 0.90452,-0.57562 1.97352,-0.98676 3.24808,-1.31568 1.27457,-0.28781 2.63136,-0.45227 4.02927,-0.45227 2.79582,0 4.19372,0.94564 4.19372,2.79582 0,0.45226 -0.0411,0.86341 -0.16446,1.23346 -0.12334,0.37003 -0.2878,0.69895 -0.45226,0.98675 -0.28781,-0.0822 -0.61672,-0.12334 -1.02787,-0.16446 -0.41115,0 -0.82231,-0.0411 -1.27457,-0.0411 -0.8223,0 -1.64459,0.0822 -2.4669,0.28781 -0.8223,0.20557 -1.52125,0.45226 -2.09687,0.78118 v 14.39024 c -0.24668,0.0822 -0.65783,0.12334 -1.15121,0.20557 -0.49338,0.0822 -1.02788,0.12334 -1.60349,0.12334 -1.15121,0 -2.01463,-0.20557 -2.54913,-0.61672 -0.53449,-0.41115 -0.78118,-1.15121 -0.78118,-2.22021 z m 15.74703,-3.49477 v -18.54286 c 0.28782,-0.0822 0.65785,-0.16446 1.15123,-0.24668 0.49338,-0.0822 1.02787,-0.16446 1.56237,-0.16446 1.19233,0 2.01463,0.20557 2.54913,0.61672 0.53449,0.41115 0.78118,1.19234 0.78118,2.26132 v 2.83693 h 5.71498 c 0.16446,0.20558 0.2878,0.53451 0.41115,0.94566 0.16447,0.41114 0.20558,0.86341 0.20558,1.35678 0,0.82231 -0.16447,1.43903 -0.57561,1.80907 -0.37004,0.41114 -0.86342,0.5756 -1.48014,0.5756 h -4.27596 v 8.14078 c 0,0.78118 0.24669,1.35678 0.74007,1.6857 0.49338,0.37004 1.19234,0.5345 2.09686,0.5345 0.41115,0 0.86341,-0.0411 1.31569,-0.16446 0.49338,-0.0822 0.90452,-0.16446 1.23344,-0.32892 0.24669,0.24669 0.41115,0.57561 0.57561,0.90453 0.20557,0.37004 0.28781,0.78118 0.28781,1.23345 0,0.90453 -0.41116,1.68571 -1.15122,2.30244 -0.78118,0.5756 -2.05575,0.90453 -3.86481,0.90453 -2.30244,0 -4.07038,-0.5345 -5.34495,-1.56237 -1.27456,-1.06899 -1.93241,-2.7547 -1.93241,-5.09826 z'
);
// render path 001 (s)
ctx.fillStyle = '#000000';
ctx.lineWidth = 62.7822;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
ctx.fill(path001);
// render path 002 (Eng)
ctx.fillStyle = '#000000';
ctx.lineWidth = 61.5812;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
ctx.fill(path002);
// render path 003 (heart shape)
ctx.fillStyle = '#FF0000';
ctx.lineWidth = 0.182326;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
ctx.fill(path003);
// render path 004 (heart)
ctx.fillStyle = '#FFFFFF';
ctx.lineWidth = 41.115;
ctx.lineJoin = 'round';
ctx.miterLimit = 2;
ctx.fill(path004);
</script>
</html>