forked from voteflux/flux-website-v2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimated-logo.html
134 lines (128 loc) · 8.34 KB
/
animated-logo.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
<html>
<head>
<title>Demo Flux Animation</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/non-sass.css">
<meta name="viewport" content="initial-scale=1.0">
<style>
body {
background-color: #0e0e0e;
}
</style>
</head>
<body>
<div class="center center-xy">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.8120728 399" class="fullSVG">
<path class="fluxTriZoom" fill="#D9D06C"
d="M112.563 32.436L56.141 65.011c18.847 10.884 37.697 21.765 56.545 32.648V32.365l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#0894C2"
d="M281.47 129.953a554097.014 554097.014 0 0 0-56.425 32.577c18.85 10.883 37.7 21.764 56.547 32.648v-65.297l-.07.042-.053.03z"/>
<path class="fluxTriZoom" fill="#67539C"
d="M112.563 162.46a816331.955 816331.955 0 0 0-56.422 32.576c18.848 10.883 37.698 21.763 56.545 32.648v-65.296l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#88C27E"
d="M168.866-.07a560063.55 560063.55 0 0 0-56.424 32.577C131.29 43.39 150.14 54.27 168.989 65.153V-.142l-.071.042-.052.03z"/>
<path class="fluxTriZoom" fill="#65B3B0"
d="M225.167 32.436l-56.423 32.575c18.848 10.884 37.698 21.765 56.546 32.648V32.365l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#584865"
d="M281.47 64.94l-56.425 32.577c18.848 10.885 37.698 21.766 56.547 32.649V64.869l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#67539C"
d="M281.47 194.966a553383.415 553383.415 0 0 0-56.425 32.576c18.849 10.883 37.699 21.764 56.547 32.647v-65.295l-.07.041-.053.03zM337.77 97.447c-18.807 10.86-37.614 21.718-56.422 32.577 18.848 10.882 37.698 21.763 56.545 32.648V97.375l-.07.042-.053.03z"/>
<path class="fluxTriZoom" fill="#64B2B1"
d="M337.77 162.46a805709.1 805709.1 0 0 0-56.422 32.576c18.848 10.883 37.698 21.763 56.545 32.648v-65.296l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#F24D6E"
d="M337.77 227.472l-56.422 32.575c18.848 10.884 37.697 21.764 56.545 32.648V227.4l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#F24D6E"
d="M281.47 259.976l-56.425 32.577c18.848 10.884 37.698 21.765 56.547 32.648v-65.296l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#DFD88E"
d="M225.167 292.483c-18.807 10.86-37.615 21.718-56.423 32.576 18.849 10.883 37.698 21.764 56.546 32.648v-65.296l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#67539C"
d="M168.866 324.989a560063.416 560063.416 0 0 0-56.424 32.576c18.848 10.883 37.699 21.764 56.547 32.648v-65.296l-.071.041-.052.03z"/>
<path class="fluxTriZoom" fill="#00A5B0"
d="M112.563 292.483c-18.807 10.86-37.615 21.718-56.422 32.576 18.848 10.883 37.698 21.764 56.545 32.648v-65.296l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#5DB35C"
d="M56.262 259.976L-.162 292.553c18.848 10.884 37.698 21.765 56.547 32.648v-65.296l-.07.04-.053.031z"/>
<path class="fluxTriZoom" fill="#D4A569"
d="M225.167 227.472l-56.423 32.575c18.848 10.884 37.698 21.764 56.546 32.648V227.4l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#DC3037"
d="M56.262 64.94L-.162 97.518c18.848 10.885 37.698 21.766 56.547 32.649V64.869l-.07.041-.053.031z"/>
<path class="fluxTriZoom" fill="#CB8E47"
d="M56.262 129.953A555750.56 555750.56 0 0 0-.162 162.53c18.849 10.883 37.699 21.764 56.547 32.648v-65.297l-.07.042-.053.03z"/>
<path class="fluxTriZoom" fill="#DACE6B"
d="M56.262 194.966A555033.149 555033.149 0 0 0-.162 227.542c18.848 10.883 37.698 21.764 56.547 32.647v-65.295l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#619ABE"
d="M112.563 227.472l-56.422 32.575c18.847 10.884 37.697 21.764 56.545 32.648V227.4l-.07.041-.053.03z"/>
<path class="fluxTriZoom" fill="#1E447B"
d="M112.563 97.447c-18.807 10.86-37.615 21.718-56.422 32.577 18.848 10.882 37.698 21.763 56.545 32.648V97.375l-.07.042-.053.03z"/>
<path class="fluxTriZoom" fill="#0A8974"
d="M168.826 0v65.153c18.847-10.883 37.697-21.764 56.545-32.646-18.848-10.884-37.697-21.765-56.545-32.649V0z"/>
<path class="fluxTriZoom" fill="#274B7F"
d="M225.127 32.507v65.152c18.848-10.883 37.698-21.764 56.547-32.648-18.85-10.882-37.7-21.763-56.547-32.646V32.506z"/>
<path class="fluxTriZoom" fill="#836F8B"
d="M281.43 65.011v65.155c18.847-10.884 37.697-21.765 56.545-32.649-18.849-10.882-37.698-21.763-56.546-32.648V65.011z"/>
<path class="fluxTriZoom" fill="#36BEB2"
d="M281.43 130.024v65.154c18.847-10.885 37.696-21.766 56.545-32.648-18.848-10.884-37.698-21.765-56.546-32.649V130.023z"/>
<path class="fluxTriZoom" fill="#765989"
d="M281.43 195.036v65.153c18.847-10.884 37.697-21.764 56.545-32.647-18.848-10.884-37.698-21.765-56.546-32.648V195.036z"/>
<path class="fluxTriZoom" fill="#B53672"
d="M281.43 260.047V325.2c18.847-10.883 37.697-21.764 56.545-32.648-18.849-10.883-37.698-21.764-56.546-32.648V260.046z"/>
<path class="fluxTriZoom" fill="#B83C71"
d="M225.127 292.553v65.154c18.847-10.885 37.697-21.766 56.547-32.648-18.85-10.882-37.7-21.763-56.547-32.648V292.552z"/>
<path class="fluxTriZoom" fill="#DACE6B"
d="M168.826 260.047V325.2c18.848-10.883 37.697-21.764 56.545-32.648-18.848-10.883-37.698-21.764-56.545-32.648V260.046z"/>
<path class="fluxTriZoom" fill="#1E447B"
d="M56.222 260.047V325.2c18.848-10.883 37.698-21.764 56.545-32.648-18.848-10.883-37.698-21.764-56.545-32.648V260.046z"/>
<path class="fluxTriZoom" fill="#5DB35C"
d="M168.826 325.059v65.155c18.847-10.885 37.697-21.766 56.545-32.649-18.848-10.884-37.697-21.765-56.545-32.648V325.059z"/>
<path class="fluxTriZoom" fill="#36BEB2"
d="M225.127 227.542v65.153c18.848-10.884 37.698-21.765 56.547-32.648-18.85-10.883-37.7-21.763-56.547-32.647V227.542z"/>
<path class="fluxTriZoom" fill="#36BEB2"
d="M56.222 195.036v65.153c18.848-10.884 37.697-21.764 56.545-32.647-18.847-10.884-37.697-21.765-56.545-32.648V195.036z"/>
<path class="fluxTriZoom" fill="#FFF"
d="M112.523 32.507v325.2l56.464-32.6v-65.012l56.384-32.554c-18.795-10.85-37.59-21.7-56.384-32.553v-64.824l56.221 32.46c18.821-10.868 37.643-21.734 56.466-32.6-56.383-32.555-112.768-65.105-169.15-97.66V32.507z"/>
<path class="fluxTriZoom" fill="#DFD88E"
d="M-.08 227.542v65.153c18.848-10.884 37.698-21.765 56.546-32.648C37.617 249.164 18.767 238.284-.08 227.4V227.542z"/>
<path class="fluxTriZoom" fill="#1E447B"
d="M225.127 162.53v65.154c18.847-10.885 37.697-21.766 56.547-32.648-18.849-10.884-37.699-21.765-56.547-32.648V162.529z"/>
<path class="fluxTriZoom" fill="#584865"
d="M168.826 130.024v65.154c18.847-10.885 37.697-21.766 56.545-32.648-18.848-10.884-37.697-21.765-56.545-32.649V130.023z"/>
<path class="fluxTriZoom" fill="#0894C2"
d="M56.222 130.024v65.154c18.847-10.885 37.697-21.766 56.545-32.648-18.847-10.884-37.697-21.765-56.545-32.649V130.023z"/>
<path class="fluxTriZoom" fill="#D4A569"
d="M-.08 162.53v65.154c18.847-10.885 37.697-21.766 56.546-32.648C37.618 184.152 18.768 173.27-.08 162.388V162.529z"/>
<path class="fluxTriZoom" fill="#D3A466"
d="M56.222 65.011v65.155C75.07 119.282 93.92 108.4 112.767 97.517 93.92 86.635 75.07 75.754 56.222 64.87V65.011z"/>
<path class="fluxTriZoom" fill="#E66A5F"
d="M-.08 97.517c0 21.719 0 43.437-.002 65.155 18.849-10.884 37.7-21.765 56.548-32.648C37.617 119.14 18.767 108.26-.08 97.375V97.517z"/>
<path class="fluxTriZoom" fill="#67539C"
d="M225.167 162.46a819951.04 819951.04 0 0 0-56.423 32.576c18.849 10.883 37.698 21.763 56.546 32.648v-65.296l-.07.04-.053.031z"/>
</svg>
<!--viewBox="0 0 337.8120728 399"-->
</div>
<script src="/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
var cssWHString = function(w, h){
return (w).toString() + 'px ' + (h).toString() + 'px';
}
var runme = function() {
$(".fluxTriZoom").each(function (i, e) {
$(e).css("opacity", '0');
var wwc = $(window).width()/2;
var whc = $(window).height()/2;
var pos = $(e).offset();
var w = wwc - pos.left;
var h = whc - pos.top;
//$(e).css("transform-origin", cssWHString(w, h));
$(e).css("transform-origin", "50% 50%");
$(e).css("animation", '');
setTimeout(function () {
//$(e).css('opacity', '1');
$(e).css("animation", "fadeInHoldFadeOut 3s linear");
}, Math.random() * 600);
})
setTimeout(runme, 7000);
console.log('done')
}
setTimeout(runme, 500);
</script>
</body>
</html>