-
Notifications
You must be signed in to change notification settings - Fork 2
/
letters.html
executable file
·115 lines (103 loc) · 3.95 KB
/
letters.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
<html>
<head>
</head>
<body style="background:#000;overflow:hidden;">
<svg id="up" style="position:absolute;top:0;left:0;height:100%;" viewBox="0 0 534 456" >
<path stroke-linecap="butt" fill="none" stroke="#fff" />
</svg>
<svg id="down" style="position:absolute;top:0;left:0;height:100%;" viewBox="0 0 534 456" >
<path stroke-linecap="butt" fill="none" stroke="#fff" />
</svg>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function () {
"use strict";
function roundToDraw(x) {
var t = Math.round(x);
return t-t%2;
}
function svgM(x,y) { return 'M '+x+' '+y; } // Move to x,y
function svgL(x,y) { return 'L '+x+' '+y; } // Line to x,y
function svgH(x) { return 'H '+x; } // Draw line to x
function svgV(y) { return 'V '+y; } // Draw line to y
function svgA(rx,ry,xaxisrotation,largearcflag,sweepflag,x,y) {
return 'A '+rx+' '+ry+' '+xaxisrotation+' '+largearcflag+' '+sweepflag+' '+x+' '+y;
} // Arc to x,y with radius rx,ry
function generatePathLetter(letter, code, police, part, sw) {
var sw2 = sw/2;
var x1 = 89, x2 = 178, x3 = 267, x12 = 445,
y1 = 40, y2 = 228, y3 = 416;
var x5 = x2-sw2, x6 = sw2, x8 = x3-sw2/2-0.06*sw, x9 = 534-x8,
x10 = x1+sw2/2, x11 = x12-sw2/2,
y4 = y1+sw2, y5 = y2-sw2, y6 = y2+sw2, y7 = y3-sw2,
r1 = x2-x1, r3 = (x1-sw2)/2;
var y8 = y3-r1-sw, y13 = y7-r3, y14 = y3-r1, y15 = y14-r1,
x7 = x3-r1, x13 = x9-x2;
var r2 = (y7-y8)/2;
var y9 = y8-r2, y10 = y8+r2, x4 = x3-r2,
y11 = y4+r1, y12 = y7-r1;
console.log(r2, (89-25)/2);
var letters = {
demihaut: {
up: {
'O': svgM(x1,y2)+svgV(y11)+svgA(r1,r1,0,0,1,x3,y11)+svgV(y2),
'E': svgM(x1,y2)+svgV(y4)+svgH(x2),
'I': svgM(x1,y2)+svgV(y1),
'M': svgM(x1,y2)+svgV(y4)+svgH(x10)+svgL(x8,y5)+svgH(x9)+svgL(x11,y4)+svgH(x12)+svgV(y2),
},
down: {
'A': svgM(x1,y3)+svgV(y6)+svgH(x3)+svgV(y3),
'B': svgM(x1,y2)+svgV(y7)+svgH(x4)+svgA(r2,r2,0,0,0,x4,y8)+svgA(r2,r2,0,0,0,x3,y9)+svgV(y2)+svgM(x1,y8)+svgH(x4),
'C': svgM(x1,y2)+svgV(y12)+svgA(r1,r1,0,0,0,x3,y12),
'D': svgM(x1,y2)+svgV(y7)+svgH(x4)+svgA(r2,r2,0,0,0,x3,y10)+svgV(y2),
'E': svgM(x5,y6)+svgH(x1)+svgV(y7)+svgH(x2),
'F': svgM(x5,y6)+svgH(x1)+svgV(y3),
'G': svgM(x1,y2)+svgV(y12)+svgA(r1,r1,0,0,0,x3,y12)+svgV(y8)+svgH(x2),
'H': svgM(x1,y3)+svgV(y6)+svgH(x3)+svgV(y3),
'I': svgM(x1,y2)+svgV(y3),
'J': svgM(x1,y2)+svgV(y13)+svgA(r3,r3,0,0,1,x6,y13)+svgV(y10),
'K': svgM(x1,y2)+svgV(y3)+svgM(x3,y2)+svgV(y15)+svgA(r1,r1,0,0,1,x7,y14)+svgA(r1,r1,0,0,1,x3,y3)+svgV(y3)+svgM(x1,y14)+svgH(x7),
'L': svgM(x1,y2)+svgV(y7)+svgH(x2),
'M': svgM(x1,y2)+svgV(y3)+svgM(x3,y2)+svgV(y3)+svgM(x12,y2)+svgV(y3),
'N': svgM(x1,y3)+svgV(y6)+svgH(x13)+svgL(x8,y7)+svgH(x3)+svgV(y2),
'O': svgM(x1,y2)+svgV(y12)+svgA(r1,r1,0,0,0,x3,y12)+svgV(y2),
'R': svgM(x2,(y2+y3)/2)+svgL(x3,y3)+svgV(y3+1),
}
}
};
if(police == 'demihaut') {
if(part == 'up') {
return letters.demihaut.up[code];
}
else if(part == 'down') {
return letters.demihaut.down[letter];
}
else {
return letters.demihaut.up[code]+' '+letters.demihaut.down[letter];
}
}
}
$(document).ready(function() {
var w = $(window).width();
var h = $(window).height();
var up = $('#up');
var down = $('#down');
var pos = {
height: roundToDraw(h),
left: roundToDraw((w-0.78*h)/2)
};
up.css(pos);
down.css(pos);
var letter = 'R';
var code = 'O';
var police = 'demihaut';
var sw = 50;
$('#up path').attr('d', generatePathLetter(letter, code, police, 'up', sw));
$('#down path').attr('d', generatePathLetter(letter, code, police, 'down', sw));
$('#up path').attr('stroke-width', sw);
$('#down path').attr('stroke-width', sw);
});
})();
</script>
</body>
</html>