-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblack.html
140 lines (120 loc) · 5.47 KB
/
black.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
<!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;
background: url("./background.png") no-repeat center center;
background-size: cover;
}
svg {
display: block;
height: 100%;
min-width: 500px;
min-height: 500px;
max-width: 70%;
max-height: 70%;
}
#jslogo path,
#bart path {
fill: transparent;
stroke: #59ca8e;
stroke-width: 5px;
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: "#59ca8e"
});
setStyle(mustache, {
transition: transition,
WebkitTransition: transition,
fill: "#59ca8e"
});
}, 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>