-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (105 loc) · 5.17 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BartJS</title>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
width: 100%;
}
a {
display: flex;
with: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
svg {
display: block;
height: 100%;
min-width: 500px;
min-height: 500px;
max-width: 70%;
max-height: 70%;
}
#jslogo path,
#bart path {
fill: white;
stroke: #323330;
stroke-width: 3px;
stroke-linecap: square;
}
</style>
</head>
<body>
<a href="http://bartjs.io/">
<svg viewBox="0 0 386 386" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<g id="jslogo">
<title>JS Logo</title>
<path class="border" d="M0,0 0,386" />
<path class="border" d="M0,386 386,386" />
<path class="border" d="M386,386 386,0" />
<path class="border" d="M386,0, 0,0" />
<path class="js" d="m355.40823,294.93976c-2.82535,-17.61218 -14.30991,-32.39905 -48.32343,-46.19528c-11.81485,-5.43039 -24.98724,-9.31973 -28.9133,-18.27258c-1.39432,-5.2103 -1.57776,-8.14566 -0.69714,-11.30115c2.53174,-10.23711 14.75015,-13.42928 24.43689,-10.49391c6.23761,2.09143 12.14505,6.89813 15.70416,14.56674c16.6582,-10.78746 16.62149,-10.71405 28.25287,-18.12584c-4.25629,-6.60458 -6.53119,-9.64999 -9.31976,-12.47531c-10.01697,-11.1911 -23.66638,-16.95172 -45.49814,-16.51143c-3.77927,0.47707 -7.59521,0.99071 -11.37454,1.4677c-10.89749,2.75195 -21.28134,8.47589 -27.37218,16.14447c-18.27264,20.73103 -13.06241,57.01938 9.17299,71.95303c21.90512,16.43802 54.08405,20.18057 58.19351,35.55466c3.99945,18.823 -13.83289,24.91385 -31.55515,22.74893c-13.06232,-2.71518 -20.32733,-9.35645 -28.17947,-21.42813c-14.45663,8.36578 -14.45663,8.36578 -29.31688,16.91507c3.5224,7.70532 7.22829,11.19107 13.13573,17.86908c27.95935,28.36282 97.93097,26.96863 110.47964,-15.96109c0.51367,-1.46762 3.88934,-11.30115 1.17419,-26.45496zm-144.56654,-116.53384l-36.10498,0c0,31.18823 -0.14676,62.15623 -0.14676,93.34448c0,19.85037 1.0274,38.04959 -2.20151,43.6268c-5.28365,10.97098 -18.96976,9.61331 -25.2074,7.4852c-6.34776,-3.11884 -9.57669,-7.55859 -13.31921,-13.83289c-1.02739,-1.79794 -1.79791,-3.19226 -2.05476,-3.30231c-9.79678,5.9808 -19.55684,11.99832 -29.35361,17.97906c4.88005,10.01694 12.07166,18.71292 21.28138,24.36353c13.75951,8.25571 32.25227,10.78748 51.58894,6.34772c12.58537,-3.66919 23.44623,-11.26447 29.13348,-22.82245c8.21901,-15.15378 6.45781,-33.49979 6.38443,-53.7905c0.18341,-33.09622 0,-66.1924 0,-99.39865z" fill="#323330"/>
</g>
<g id="bart">
<title>Moustashe</title>
<path d="m192.89015,104.24084c-27.33296,41.54678 -100.03934,25.69299 -100.03934,25.69299c-47.55936,-14.21381 -38.81349,-44.82675 -38.81349,-44.82675c20.2264,-30.61292 38.26683,-7.10657 38.26683,-7.10657c3.28062,6.55991 -3.28062,6.55991 -3.28062,6.55991c-20.22707,-9.83987 -16.39978,6.01324 -16.39978,6.01324c16.94643,25.69303 58.49255,-11.47984 58.49255,-11.47984c40.4528,-27.87962 62.64932,5.23394 62.64932,5.23394l2.43877,-1.95398c0,0 20.22708,-31.15959 60.67986,-3.27996c0,0 41.54544,37.17349 58.49188,11.47984c0,0 3.82797,-15.85309 -16.39911,-6.01317c0,0 -6.56125,0 -3.28064,-6.55992c0,0 18.04047,-23.50568 38.26617,7.10658c0,0 8.74655,30.61293 -38.81281,44.82674c0,0 -72.70706,15.85379 -102.54001,-26.09299" id="svg_2" fill="#323330"/>
</g>
</svg>
</a>
<script>
(function() {
'use strict';
animatePath('#jslogo .js', '3.4s');
animatePath('#jslogo .border');
animatePath('#bart path');
setTimeout(function () {
var js = document.querySelector('#jslogo .js');
var mustache = document.querySelector('#bart path');
var transition = 'all 300ms ease-in-out';
setStyle(js, {
'transition': transition,
'WebkitTransition': transition,
'fill': '#323330'
});
setStyle(mustache, {
'transition': transition,
'WebkitTransition': transition,
'fill': '#323330'
});
}, 2500);
function animatePath (selector, time) {
time = time || '2s';
var paths = document.querySelectorAll(selector);
Array.prototype.forEach.call(paths, function (path) {
var length = path.getTotalLength();
setStyle(path, {
'transition': 'none',
'WebkitTransition': 'none',
'strokeDasharray': length + ' ' + length,
'strokeDashoffset': length,
});
path.getBoundingClientRect();
setStyle(path, {
'transition': 'stroke-dashoffset ' + time + ' ease-in-out',
'WebkitTransition': 'stroke-dashoffset ' + time + ' ease-in-out',
'strokeDashoffset': '0',
});
});
}
function setStyle (obj, style) {
for(var styleKey in style) {
if (!style.hasOwnProperty(styleKey)) continue;
obj.style[styleKey] = style[styleKey];
}
}
}());
</script>
</body>
</html>