-
Notifications
You must be signed in to change notification settings - Fork 3
/
404.html
123 lines (121 loc) · 4.86 KB
/
404.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
<html>
<head>
<title>Thinking</title>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 70 45;" xml:space="preserve" version="1.1" id="svg2">
<g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10">
<g id="g12">
<g id="g14">
<g transform="translate(2,20)" id="g20"> <!-- face -->
<path id="path22" style="fill:#ffcc4d;" d="m 0,0 c 0,-8.837 7.164,-16 16,-16 8.837,0 16,7.163 16,16 C 32,8.836 24.837,16 16,16 7.164,16 0,8.836 0,0"/>
</g>
<g transform="translate(15.4063,25.5)" id="g24"> <!-- left eye -->
<path id="path26" style="fill:#664500;" d="m 0,0 c 0,-1.381 -0.896,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.104,0 2,-1.12 2,-2.5"/>
</g>
<g transform="translate(26,24.5)" id="g28"> <!-- right eye -->
<path id="path30" style="fill:#664500;" d="m 0,0 c 0,-1.381 -0.895,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.105,0 2,-1.12 2,-2.5"/>
</g>
<g transform="translate(9.6709,29.667)" id="g32"> <!-- left brow -->
<path id="path34" style="fill:#664500;" d="M 0,0 C -0.164,0.087 -0.303,0.223 -0.391,0.398 -0.607,0.827 -0.431,1.325 0.002,1.511 4.268,3.341 7.701,1.554 7.845,1.477 8.278,1.246 8.453,0.729 8.236,0.323 8.02,-0.082 7.496,-0.223 7.063,0.005 6.94,0.069 4.231,1.437 0.785,-0.042 0.528,-0.151 0.238,-0.127 0,0"/>
<text font-family="Verdana" font-size="0.2">404</text>
</g>
<g transform="translate(14.7427,16.4277)" id="g36"> <!-- mouth -->
<path id="path38" style="fill:#664500;" d="M 0,0 C -0.136,0.127 -0.236,0.293 -0.276,0.486 -0.375,0.955 -0.078,1.392 0.389,1.46 4.981,2.138 7.841,-0.469 7.962,-0.58 8.322,-0.914 8.357,-1.457 8.044,-1.795 7.732,-2.131 7.189,-2.133 6.83,-1.801 6.726,-1.709 4.458,0.307 0.748,-0.24 0.471,-0.281 0.197,-0.184 0,0"/>
</g>
<g transform="translate(20.4307,25.917)" id="g40"> <!-- right brow -->
<path id="path42" style="fill:#664500;" d="M 0,0 C -0.156,0.098 -0.286,0.243 -0.362,0.424 -0.549,0.866 -0.339,1.352 0.105,1.508 4.486,3.044 7.79,1.028 7.929,0.941 8.344,0.681 8.483,0.154 8.24,-0.237 7.998,-0.627 7.464,-0.732 7.049,-0.475 6.929,-0.402 4.321,1.146 0.782,-0.095 0.518,-0.187 0.23,-0.143 0,0"/>
<text font-family="Verdana" font-size="0.2">File not Found</text>
</g>
<g transform="translate(17.2764,0.8682)" id="g44"> <!-- hand -->
<path id="path46" style="fill:#f4900c;" d="m 0,0 c 0,0 1.265,0.411 1.429,1.352 0.173,0.971 -0.624,1.167 -0.624,1.167 0,0 1.041,0.208 1.172,1.376 0.123,1.1 -0.862,1.363 -0.862,1.363 0,0 0.97,0.4 1.016,1.539 0.038,0.959 -0.995,1.428 -0.995,1.428 0,0 5.038,1.22 5.555,1.34 0.516,0.121 1.321,0.616 1.07,1.695 -0.249,1.08 -1.204,1.118 -1.698,1.003 -0.494,-0.116 -6.744,-1.567 -8.9,-2.069 -0.23,-0.053 -1.308,-0.302 -1.439,-0.334 -0.54,-0.127 -0.785,0.111 -0.405,0.512 0.509,0.536 0.833,1.129 0.947,2.113 0.119,1.036 -0.232,2.314 -0.433,2.809 -0.374,0.921 -1.005,1.649 -1.734,1.899 -1.138,0.39 -1.946,-0.321 -1.542,-1.561 0.604,-1.855 0.209,-3.375 -0.833,-4.293 -2.449,-2.157 -3.589,-3.695 -2.83,-6.973 0.827,-3.575 4.377,-5.876 7.952,-5.048 C -2.965,-0.64 0,0 0,0"/>
</g>
</g>
</g>
</g>
</svg>
<script>
var params = {
"g24": { // left eye
x0: 15.4063,
y0: 25.5,
vx: 3,
vy: 3,
vr: 0
},
"g28": { // right eye
x0: 26,
y0: 24.5,
vx: 3,
vy: 3,
vr: 0
},
"g32": { // left brow
x0: 9.6709,
y0: 29.667,
vx: 3,
vy: 3,
vr: 0
},
"g36": { // mouth
x0: 14.7427,
y0: 16.4277,
vx: 3,
vy: 3,
vr: 45
},
"g40": { // right brow
x0: 20.4307,
y0: 25.917,
vx: 3,
vy: 3,
vr: 0
},
"g44": { // hand
x0: 45/2, // based around the center
y0: 45/2,
vx: 35/2, // move for all but 10 pixels of the whole image
vy: 35/2,
vr: 360 // rotate +- 360 deg
}
}
function chooseNewGoal() {
var elems = Object.keys(params);
for(var i = 0;i<elems.length;++i) {
var param = params[elems[i]];
var x = (param.x0+(Math.random()-0.5)*2*param.vx);
var y = (param.y0+(Math.random()-0.5)*2*param.vy);
var r = (Math.random()-0.5)*2*param.vr;
document.getElementById(elems[i]).style.transform = "translate("+x+"px,"+y+"px) rotate("+r+"deg)";
}
}
setInterval(chooseNewGoal, 2000);
</script>
<style>
body, html, svg {
height: 100%;
margin: 0;
}
svg {
overflow: visible;
}
g {
transition: 4s ease;
}
text {
transform: translate(1px,0.2px) rotate(10deg) scale(1,-1);
fill: white;
}
path {
fill-opacity:1;
fill-rule:nonzero;
stroke: none;
}
</style>
</body>
</html>